Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them - all via classes.

Using the width property

If the width property is set to a percentage and the height is set to auto, the image will be responsive and scale up and down.

<img class="w-100 h-auto" src="..." alt="...">

Notice that the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

<img class="mw-100 h-auto" src="..." alt="...">