how to responseive images css

How to Make Responsive Images With CSS

Ben by

For the first time ever, mobile web browsing is beginning to beat the desktop as the most common platform.

Even here on Dev Cereal, over 40% of our traffic comes from phones and tablets, rather than the traditional desktop or laptop.

That’s why it’s so important that your site displays properly on mobile devices.

Also Read: How To Make Your Own Responsive CSS Grid From Scratch

The Problem

The problem is that web browsers don’t scale images automatically, so what looks good on a large screen won’t look so good on a small screen.

You either end up with images that take up the whole page, or images that are so tiny you can’t read them.

We don’t want either of those.

So how can we scale images so that they look good on both large and small screens?

Responsive Images

The trick to making images responsive is surprisingly simple.

All you need to do is add a few lines of CSS to your stylesheet:

img{
max-width:100%;
height:auto;
}

There are a few things to note with this method:

  • To avoid streching, an image’s container should never be larger than the image itself.
  • To avoid wasting bandwidth, an image should never be larger than the container that it’s in.

Once that’s done your images should immediately become responsive.

How does it work?

So we’ve explained how to make your images responsive, but we haven’t explained why.

We start off by adding some custom CSS to the img tag.

You’ll notice the lack of a dot at the start means we’re referencing a tag rather than a CSS class.

Using max-width we declare that the image should fill up 100% of the width of the container.

The benefit of this is that as the container is resized, so will the image inside.

You can test this in your browser by resizing the window, you should find that the image also resizes as well!

Finally we set the height of the image to automatically scale with the width.

The reason for this is to stop any distortion of the image on the page.

If we didn’t change the height the width would change, but the height would always stay the same.

Meaning we’d end up with some squashed and distorted images on our page, no thanks!

 

Now you should have a very basic responsive image on your page!

You may also like