Images
Use one of the built-in CNVS classes to support responsive behavior for your images.
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.
.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">
.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">
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">