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.
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.
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="...">