Medias

Reponsive images

Reponsive images will resize automatically to fit their container width. If the image is smaller than its container it won't be upsized. Use .c-image-fluid, or .c-image-fluid-block to display it as a responsive block.

Reponsive fit images

This image resize itself depending on its container width, while respecting the specified ratio.

Ratio

16/9 ratio (default)

4/3 ratio

Square ratio

Scaling

Scale-down (default)

Like contain but will only scale the image if it is larger than its container. It won't upscale.

Cover (default)

The image is sized to maintain its aspect ratio while filling the box. The image will be clipped to fit.

Contain (default)

The image is scaled to maintain its aspect ratio while fitting within the element's content box

Styles

Rounded

Reponsive fill images

This element is filled with a given image and resize itself depending on its container width, while respecting the specified ratio.

Ratio

Styles

Reponsive videos

Reponsive videos will resize automatically to fit their container width. Like for responsive images it will respect the video original ratio.

Reponsive video embeds

Reponsive videos embed (Youtube, Vimeo,…) will resize automatically to fit their container width in a 16/9 ratio.