Media

Quickly add responsive media to your projects by using our easy image utility class.

Responsive image

To make an image truly responsive, a max-width needs to be set at 100% and height needs to be auto.
This makes the image full width of the parent but maintains the aspect ratio as height is at auto.

Notation:

You can target the responsive image class by using img-responsive. This adds the properties outlined above to the element.

Properties:

Class	Properties
.img-responsive	max-width: 100%; height: auto;

Example:

Here the image is using the img-responsive class to always be 100% of the parent (image-container). As the height is auto, the aspect ratio will remain intact.
Go ahead a resize the screen to see the effect

<div class="img-container b-light p-2">
    <img class="img-responsive" src="..." alt="Responsive Design">
</div>

Responsive iFrame

iFrame elements are notoriously difficult to make responsive and keep aspect ratios intact. Luckily we have just the thing to help.

Notation:

You can target the responsive iFrame class by using a container which will apply properties to make it responsive. Add iframe-container to the parent of the iFrame, shown below.
The iframe-container has a padding of padding-top: 56.25% setting the padding top to a percentages of height 9 / width 16 which keeps a desirable aspect ratio which matches YouTube height and width ratio.
The iFrame is set to be absolutely positioned in the container.

Properties:

Class	Properties
.iframe-container	position: relative; overflow: hidden; padding-top: 56.25%;
.iframe-container iframe	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;

Example:

Here the iframe is contained in a iframe-container which means the iFrame becomes responsive without distorting aspect ratio.
Note: the first div which adds border and padding to the container is entirely optional.
Go ahead a resize the screen to see the effect.

<div class="b-light p-2 my-4">
    <div class="iframe-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/6rxWc-TNIJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>