Skip to main content

How to “Resize” Images with CSS

By Adam Roberts



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!

Google, Netflix and ILM are Python users. Maybe you should too?