Time-saving CSS techniques to create responsive images

Adrien Zaganelli
Aug 12, 2018 · 3 min read
Image for post
Image for post
Photo by Kevin Ku on Unsplash

As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours.

This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.

the “OMG I NEED THIS ASAP” way

.myImg {
background-image: url("my-image.png");
background-size: cover;
}

Sounds familiar? We’ve all done it once, doesn’t it feel like cheating to you?

Using background properties is very useful, they just work. Yet, remember that you should use them only for non-content images or as a replacement of text and in some particular cases.

The way from the future

.myImg {
object-fit: cover;
width: 320px;
height: 180px;
}

That’s all folks! See how when we retrieve the friendly value cover, we can also use contain.

Okay what’s the trap?

Image for post
Image for post
source: https://css-tricks.com/almanac/properties/o/object-fit/#article-header-id-4
object-fit demo

The “Netflix” way

We will keep the image ratio with a percentage on the padding property. Your image will be a full size absolute child.

The code looks like this:

.wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}

“Hey man, it looks complicated.”

Once you get the concept, the technique is simple and widely used. Netflix uses it!

Image for post
Image for post
Take a look at the class names !

A little demo:

The Simple way

img {
height: auto;
width: 100%;
/* even more control with max-width */
max-width: 720px;
}

If your layout isn’t too complicated, it works in most cases.

The simple way

The Performance way (Advanced)

Did you know that in modern browsers you can change an image source depending on your page width? That’s what srcset is made for!

You can combine them with the HTML 5 <picture> tag, which gracefully degrades with an <img>.

<picture>
<source media="(max-width: 799px)" srcset="elva-480w.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg">
</picture>
srcset with default image fallback

To Recap

  1. Use object-fit if you don’t care about IE.
  2. The padded container technique, used by Netflix, works everywhere.
  3. In most cases, just add height: auto; in your CSS.
  4. If you need fast load times, use srcset to load smaller images on mobile.

freeCodeCamp.org

This is no longer updated.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store