Back to list of all resources

Responsive Images

How do you make your images on a webpage
respond to changing browser width?

Make your browser thinner and watch the effect on the images below

The image above has a set width and height in the HTML
<img src="images/photo.jpg" width="600" height="600" alt="Photo of lightning"/>
which makes it NOT responsive when the browser is resized. Resize your browser and see the non-responsiveness of image.

The image above has width and height REMOVED in the HTML and an ID added
<img src="images/photo.jpg" alt="Photo of lightning" id="lightning"/>
with CSS
#lightning {
which preserve the right size and aspect ratio but is NOT responsive.

For responsive images when a browser is resized, wrap a div or figure around the image like this:

<figure id="lightningBox">
      <img src="images/photo.jpg" width="600" height="600" alt="Photo of lightning" id="lightning"/>

and use CSS like this:

#lightningBox {
      max-width: 600px;
/*Set the max width of the figure or div tag to limit the size of the image inside*/
      height: auto;
/*The figure or div tag will take on the height of elements inside*/
#lightning {
/*This overrides the inline HTML width and height*/
      width: 100%;
/*This fits image fully in figure or div tag no matter the width of figure or div*/
      height: auto;
/*This preserves aspect ratio*/