Images require a little special care on responsive websites. This lesson will present a few of the issues that arise when working with responsive images, and the options you have when dealing with them.
The most basic problem that you are going to face when working with responsive images is the aspect-ratio, or the relationship between width and height. If you shrink the width of an image on smaller screens, and do not also manipulate the height the image will appear distorted!
The solution to this issue is incredibly easy, and we’ve already mentioned it in an earlier lesson: simply don’t define both a width and a height. If an image is given a flexible width, and the height is set to
auto, then it should retain it’s aspect ratio correctly.
What if you don’t want your image to simply shrink (in both height and width)?
object-fit are two properties that can provide a little more flexibility (pun intended) with how aspect-ratios are handled.
background-size are properties that work on elements with a background image, and do not work on normal
img tags. You’ll see some examples and specifics in the reading assignment later, but you can get quite a lot of control over the display and placement of background images by working with these properties. For example,
background-position: center will make sure the image is always centered in it’s container, even if the container is too small to fit the whole image.
background-size: cover will resize the image so that it is always completely filling it’s container while cropping as little as possible.
Here’s a little demo you can play with:
object-fit works similarly, but is meant for
img tags. With the
object-fit property you can specify a width and height for your images and then tell an image how it is supposed to fit itself to those dimensions. The default value for
fill, which simply stretches the image to fit the dimensions, but much like
background-size you can also tell it to
contain the image.
Here’s a demo of
object-fit on an image. Open this one up on CodePen and resize the browser to see how the image reacts.
It is also possible to literally use different images for different screen sizes. This gives you the most control over exactly how your images are displayed at various resolutions. For example, instead of just trusting
object-fit to keep the subject of a photograph in frame, you could present a cropped version of it on smaller screens. There are two ways of achieving this, but the most flexible is using the
<picture> tag, which you’ll see in the reading assignment.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.