Images, denoted by the all-enduring <img> tag, have been a starter in the markup playbook since the early days of the internet. However, they offer very little in form of responsive sizing or styling. CNVS attempts to solve this.

Responsive Images

Fill Image .image-fill

Images by default assume their source width, though this can be changed in markup by using the width and height attributes directly on the <img> tag. Images are made responsive by adding the class .image-fill, setting a max-width: 100%; and applying height: auto;, filling their parent container.

<img src="…" class="image-fill">

Fluid Image .image-fluid

The .image-fill class will force an img to fill it’s parent. However, you may wish to stop filling the parent container once the image reaches it’s original width. To do this use the class .image-fluid. Resize your window and observe how the image below adjusts in size.

<img src="…" class="image-fluid">

Image Shapes

Use one of the provided image shape classes to adjust the general shape of your image.

<img src="…" class="image-rounded">
<img src="…" class="image-circle">