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 {
max-width:600px;
}
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"/>
</figure>
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*/
}