Responsive Images and Video

Images are by default inline elements that are a certain size and will take up that space on your web site.

For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example:

The following needs to be in place for that to happen:

  1. The image must be inside a container.
  2. CSS is applied to the container to give it a responsive width (ie it’s part of a CSS grid with an fr unit, or the container has a % width)
  3. CSS is applied to the image to allow it to change size to shrink if needed.

Put the Image inside a container

This is relatively simple. Just remember to use a block element like div, section, paragraph, figure. Also it should have a class applied to the container (not required but easier to style later).

<div class="imageContainer">
   <img src="images/myimage.jpeg" alt="image of something cool">
</div>

<figure class="imageContainer">
    <img src="images/myimage.jpeg" alt="image of something cool">
    <figcaption>Image of something cool by Awesome Person</figcaption
</figure>

Apply Responsive Width to the Container

This one is hard to show an example. It depends on how you’re doing the layout for your page. If you’re using CSS grid then just make sure you use responsive units, like fr, for the widths of your columns.

Apply CSS to the Image to Allow it to Shrink

Notice we did not say anything about growing. Generally, you DO NOT want the image to grow to fill its container. It could become pixellated and not look good. At first, we will load in images that are large enough to fill the space we need. Another post will show a more advanced responsive method that can load different sized images.

/* Basic Responsive Images and Video */
img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}

Setting the width and height to auto allows it to change size. Setting the max-width to 100% means it won’t grow larger than its original size.

Here is an example of an image inside a container that is smaller than the image where no CSS has bee applied to the image:

And here is the same image with the CSS applied

Responsive Video

This is away to embed a video element that will resize responsively with your page. Actually, it allows you to put whatever you want in a box with a specific aspect ratio, but the most common use is for video which is either a 4:3 or 16:9 aspect ratio.

For this to work you need to:

  • Get the HTML right by wrapping the iframe code you copy from Vimeo or YouTube with a div (or other block element).
  • Give that wrapping element two classes
    1. videoWrapper
    2. One of the ratio classes: ratio-16-9 or ratio-4-3.Side note: you can make your own ratio by dividing the height by the width (opposite of ratio) and making the result the padding-bottom percent. If you want 21:9 ratio then 9÷21 = .428571 so: .videoWrapper.ratio-21-9{ padding-bottom: 42.8571% }
    3. Example: <div class=”videoWrapper ratio-21-9″>
  • Copy and paste the CSS into your own CSS code.
.videoWrapper {
	position: relative;
	padding-top: 25px;
	height: 0;
  clear:both;
  outline:1px solid red;
}

.videoWrapper.ratio-16-9{
    padding-bottom: 56.25%; /* 16:9 */
}

.videoWrapper.ratio-4-3{
    padding-bottom: 75%; /* 4:3 */
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Here is a codepen with a working example

See the Pen Responsive Video Embed by Christopher Stein (@profstein) on CodePen.

Leave a comment