How to make images responsive on web pages

Making images look good on any screen size is a very important aspect which every frontend developer must pay close attention to. What you should note  is that as a frontend developer, you have to configure your code  in such a way that no matter the size of the image or the size of the screen that the image is being accessed from, the images should always look good and be scaled up or down perfectly.  In this post I am going to be showing you a very simple way to ensure this happens.

Okay to explain the process I am going to be using the basic example shown below

lets say you have an Image tag as shown below with  an image location

<img src="/example.jpg" />

If you render an image here it will always scale up to meet the width and height of the image, you do not want it to this as it will actually lead to the image overflowing your users screen  and that doesn't look good.

To fix this let's add a container to our html's img tag and add a bit of css for styling

<div class="img-box">
  <img src="/example.jpg" />
</div>

As you can see from the code above I have added a wrapper/container within which the image now resides

.img-box{
 width:200px;
 height:auto;

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

Now from this css code above we are making the width the wrapper/container 200px and setting the height to auto (to make the container responsive always set height to auto, except in some special cases where you need a specific height).

Also we are setting the css style of the image tag to a width of 100% (this means the image will always stretch to fit the width of the container) and a height of auto (for the height to be scaled up or down according to the width of the image). If you do not want the size to be applied to all image tags you can specify the ones with this container by changing it to

.img-box{
 width:200px;
 height:auto;

}
.img-box img{
 width: 100%;
 height:auto;
}

What this means is that the style will only be applied to img tags within div's with the img-box class.

To change the size of the image at any time all you have to do is change the width in the img-box style to one that fits your requirement.

Conclusion

With the html & css code above in our project all our images will always scale up and down perfectly no matter the screen size of our users. As always thanks for reading, if you have any comments feel free to leave them down below.