How to “Resize” Images with CSS

While you cannot “resize” images in CSS3, you can make them appear to be resized in the browser using media queries and the principles of responsive design.

The idea is to have the image respond to the viewport dimensions to make sure it does not overlap the edge. A maximum width must be defined if the viewport is taller than it is wide, and a maximum height must be defined if the viewport is wider than it is tall.

Here is some sample code, and links to more articles on the topic. Note the use of img.ri:empty empty is a structural pseudo-class which only matches elements which have no children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration.

@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}

For more on responsive images, here’s an article with more information on creating responsive centered images, a guide to maintaining image aspect ratios using CSS3 and a complete guide to the background-size property.