lagomh
6/24/2018 - 6:47 PM

Make an Image Responsive

Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:

img { width: 720px; }

You can use:

img { max-width: 100%; display: block; height: auto; } The max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the display property to block changes the image from an inline element (its default), to a block element on its own line. The height property of auto keeps the original aspect ratio of the image.

responsiveImg.css
content_copyfile_download
img {
  max-width: 100%;
  display: block;
  height: auto;
}