Responsive Images with Inline CSS

This is how I create images that are full width in desktop devices and mobiles etc.

You just need to use:

max-width: 100%;
height: auto;

Good info here on W3 Schools


      
            <img src="image-address.png" 
style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
 

Change the “max-width” to whatever you want the max width of the image to be on a desktop device.

For personal reference, this is the exact code I need for my own website with pre-built classes:

 <div style= "margin-bottom:20px;" > 
      <div class="content-item">
            <img src="image-url" style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
      </div>
  </div>

Here’s another example that I used today (july 2023!)

  <img src="drews-sexy-image.jpg"  style="width:1000px; max-width: 100%; height: auto; padding-top:25px;" alt="Basketball hoop dimensions" />


In the code above^ – the image will be 1000px wide on desktop, and the width of the screen on smaller devices

Padding-top, just puts some white space above the image

By the way – when you set image sizes to % – this represents the % of the block that the image is contained within

Leave a comment