How to create a mobile responsive image that shrinks and expands using CSS

You may have images on your website that you would like to view in smaller sizes on hand held mobile devices. Creating a mobile responsive image that shrinks and expands with the size of the viewport is the solution.

In this article we shall describe how to create a mobile responsive image using CSS. Add the following code to the head section of your web page

<style>
.responsive {
  max-width: 80%;
  height: auto;
}
</style>

Next add the responsive class to your html as shown in the example below

<a href="https://imagepdf.in"><img class="responsive" src="logo.png" alt="Image to PDF Converter Logo"></img>

Your image will now scale up and down with the changing size of the viewport.

That is all.

If you liked this article please do leave a reply and share it with friends.

Thanks.