Make an image responsive - the simplest way [duplicate]

Solution 1:

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>

This should scale your image if in a fluid layout.

For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.

Note that changing the height of the image will mess with the ratio.

Solution 2:

Width: 100% will break it when you view on a wider are.

Following is Bootstrap's img-fluid.

max-width: 100%; 
display: block; 
height: auto;