Make an image responsive - the simplest way

Question

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly.

However, the ONLY thing that doesn't is my image in the body; which is wrapped in paragraph tags... with that being said, is there a simple way to make the image responsive as well?

Here's the code that I used to have my image show in the body:

<body>
    <center>
        <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
    </center>
</body>

Edureka · Answer 1 · Jun 21, 2022

You can try doing

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

If you're using a fluid layout, this should scale your image.

To make your layout responsive (that is, it responds to the size of the window), add a class to the picture and use @media queries in CSS to adjust the width of the image.

It should be noted that changing the image's height will throw off the ratio.