Atomic Bulldog - UI/pattern library

1.10 - Images

Source: atoms/_img-fluid.scss, line 16

Open in new window

.img-fluid Fluid images class, to center the image if this one is too small use .is-center

Examples:

Default styling
Alternative text
.img-fluid

image is fluid

Alternative text
.img-fluid.is-center

image is fluid and centered

Alternative text 
<div style="max-width: 600px"> <!-- Just for KSS -->
   <img class="[modifier]"
    srcset="https://source.unsplash.com/random/320x320 320w,
        https://source.unsplash.com/random/570x570 570w,
        https://source.unsplash.com/random/860x860 860w,
        https://source.unsplash.com/random/1150x1150 1150w"
    src="https://source.unsplash.com/random/860x860"
    alt="Alternative text">
    <!--sizes="(min-width: 600px) 33vw, 100vw"--> <!--Use sizes in <img> to serve the right image size depending on the way it is display-->
</div>