#Media

Embed figures, videos, and responsive images in your website.

#Images

Never worry about resizing images ever again. Add the img-stretch class to make your graphic responsive to all screen sizes.

<img class="img-stretch" src="https://images.unsplash.com/photo-1429516387459-9891b7b96c78?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=574fe169c8e82622c91ccfafab46c444&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">

Having the image cover a parent element or just being contained in it can be achived by using the img-cover and img-contain classes respectively. These are particularly helpful when the image or parent has a fixed height (below is an example with a fixed height of 350px).

<figure class="fig"><img class="img-cover" src="https://images.unsplash.com/photo-1488441770602-aed21fc49bd5?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=f093285a418b6aadfc00bd4b8354ec02&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" style="background: rgb(238, 238, 238); height: 350px;">
    <figcaption class="fig-caption u-text-center">Image with <code>img-cover</code></figcaption>
</figure>

<img class="img-contain" src="https://images.unsplash.com/photo-1488441770602-aed21fc49bd5?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=f093285a418b6aadfc00bd4b8354ec02&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" style="background: rgb(238, 238, 238); height: 350px;">

#Figures

Figures are simply containers for an images that would be positioned independently from the main flow of the page.

To add a caption and separate the image from the rest of the page, surround it with a figure tag with the fig class. This allows the image to span a given area while leaving space underneath it for a simple caption.

<figure class="fig">
    <img src="img/yosemite-falls.png" />
    <figcaption class="fig-caption u-text-center">
        Yosemite Valley, United States
    </figcaption>
</figure>

#Videos

As for videos, responsiveness can be achieved by adding the media-stretch class to the parent div holding the video.

To change the aspect ratio of videos, Cirrus introduces modifiers rat-4-3 and rat-1-1 to change aspect ratios with the media-stretch class.

<div class="media-stretch rat-1-1">
    <iframe width="560" height="315" src="./..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

To make a video fullscreen, add the video-fullscreen class to your video element.