Simple Responsive Image Techniques With CSS

You probably know that responsiveness has become something important when designing a website so in this tutorial I decided to focus on how to make images responsive. Some web designers think that as long as the images look good the rest doesn’t matter. Others say that the most important is the speed load. And a last group argue that both need to be considered. Here I will give you 3 simple techniques that would satisfy all of them (or almost).

Responsive Image Technique 1

This technique is probably the easiest as with it you can transform a non-responsive image to a responsive one almost instantly.

HTML

<div class="resp_img1">
    <img src="img/my-larg-img.jpg" width="600" height="300" />
</div>

CSS

.resp_img1 {
    max-width: 800px;
}

.resp_img1 img {
    width: 100%;
    height: auto;
}

The problem with this is that no matter what, the full image (width:800px, height:400px) will load. What is the point of making the user load an image that big if it’s only to display a 300×150 sized image? But if you are just looking for a quick and easy way to make your images responsive then go for it.

Responsive Image Technique 2

Now we are going to use Media Queries a great feature which is part of CSS3. You probably already know but if you don’t Media Queries allow you to trigger changes on your CSS rules depending on the screen or viewport size or even the orientation of the device. Let’s see how Media Queries can be used to make images responsive by considering the viewportLet’s see how Media Queries can be used to make images responsive by considering the viewport.

HTML

<div class="resp_img2"></div>

CSS

/* For viewports with a width higher than 640px */
.resp_img2 {
    /* Large image width & height */
    width: 800px;
    height: 400px;
    background-image: url(img/my-large-img.jpg);
}

/* For viewports with a width between 361px and 640px */
@media all and (min-width: 361px) and (max-width: 640px) {
    .resp_img2 {
        /* Medium image width & height */
        width: 600px;
        height: 300px;
        background-image: url(img/my-medium-img.jpg);
    }
}

/* For viewports with a width below 361px */
@media all and (max-width: 360px) {
    .resp_img2 {
        /* Small image width & height */
        width: 340px;
        height: 170px;
        background-image: url(img/my-medium-img.jpg);
    }
}

Here I’m using three images which have different sizes. Now small devices will have an image more appropriate to their size. The only thing here is that there isn’t a smooth transition when the image changes when resizing the browser as the size of the images are fixed.

Depending on your viewport you should see on the top left corner the word LARGE, MEDIUM or SMALL.

Responsive Image Technique 3

In this last part I am using a mix of the first two techniques.

HTML

<div class="img_wrapper">
    <div class="resp_img3"></div>
</div>

CSS

.img_wrapper {
    /* Width of your largest image */
    max-width: 800px;
}
.resp_img3 {
    height: 0;
    padding: 0;
    padding-bottom: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(img/my-large-img.jpg);
}

@media all and (min-width: 361px) and (max-width: 640px) {
    .resp_img3 {
        background-image: url(img/my-small-img.jpg);
    }
}

@media all and (max-width: 640px) {
    .resp_img3 {
        background-image: url(img/my-small-img.jpg);
    }
}

You will need to change the padding-bottom CSS property depending on the size of your image in order to keep the aspect ratio. To calculate the padding-bottom value you need just do as follow: (height/width)x100 = …%. So for my image it’s 400/800=0.5 then 0.5×100=50%.

If you want to use images with different aspect ratio just add padding-bottom in each Media Queries as well.

Just remember that you can add Media Queries with different image sizes if you need to.