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.

Frequently Asked Questions on Resizing Images with CSS

How can I resize an image in CSS without losing its quality?

Resizing an image in CSS without losing its quality involves using the right CSS properties. The ‘width’ and ‘height’ properties can be used to resize the image. However, to maintain the aspect ratio and prevent distortion, only one of these properties should be specified, and the other should be set to ‘auto’. For example:

img {
width: 100%;
height: auto;
}
This code will resize the image to fit the width of its container while maintaining its aspect ratio, thus preserving its quality.

What is the role of the ‘object-fit’ property in CSS image resizing?

The ‘object-fit’ property in CSS is used to specify how an image or video should be resized to fit its container. It has five possible values: ‘fill’, ‘contain’, ‘cover’, ‘none’, and ‘scale-down’. The ‘fill’ value stretches the image to fit the container, which may distort the image if its aspect ratio is not the same as the container’s. The ‘contain’ value resizes the image to fit within the container while maintaining its aspect ratio, which may leave some space in the container uncovered. The ‘cover’ value resizes the image to cover the entire container while maintaining its aspect ratio, which may crop some parts of the image. The ‘none’ value does not resize the image at all. The ‘scale-down’ value behaves like ‘contain’ or ‘none’, whichever is smaller.

How can I make an image responsive using CSS?

Making an image responsive in CSS involves using the ‘max-width’ property with a value of ‘100%’. This makes the image scale down if it has to, but never scale up to be larger than its original size. For example:

img {
max-width: 100%;
height: auto;
}
This code will make the image responsive, meaning it will resize itself based on the size of its container, and it will maintain its aspect ratio, thus preventing distortion.

How can I resize a background image using CSS?

Resizing a background image in CSS involves using the ‘background-size’ property. It has several possible values, including ‘auto’, ‘cover’, ‘contain’, and specific dimensions. The ‘auto’ value resizes the background image to its actual size. The ‘cover’ value resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of its edges. The ‘contain’ value resizes the background image to make sure the image is fully visible. Specific dimensions can be given to resize the background image to a certain width and height. For example:

body {
background-image: url("image.jpg");
background-size: cover;
}
This code will resize the background image to cover the entire body of the webpage.

How can I resize an image in CSS to a specific width and height?

Resizing an image in CSS to a specific width and height involves using the ‘width’ and ‘height’ properties with specific values. However, this may distort the image if its aspect ratio is not the same as the ratio of the specified width and height. To prevent distortion, only one of these properties should be specified, and the other should be set to ‘auto’. For example:

img {
width: 500px;
height: auto;
}
This code will resize the image to a width of 500 pixels while maintaining its aspect ratio.

How can I center an image in CSS after resizing it?

Centering an image in CSS after resizing it can be done using the ‘margin’ property with ‘auto’ value. This works when the image is displayed as a block-level element, which can be specified using the ‘display’ property with ‘block’ value. For example:

img {
display: block;
margin: auto;
}
This code will center the image horizontally within its container.

How can I resize an image in CSS without stretching it?

Resizing an image in CSS without stretching it involves maintaining its aspect ratio. This can be done by specifying only one of the ‘width’ and ‘height’ properties and setting the other to ‘auto’. For example:

img {
width: 100%;
height: auto;
}
This code will resize the image to fit the width of its container while maintaining its aspect ratio, thus preventing stretching.

How can I resize an image in CSS and maintain its aspect ratio?

Maintaining the aspect ratio of an image in CSS while resizing it involves specifying only one of the ‘width’ and ‘height’ properties and setting the other to ‘auto’. For example:

img {
width: 100%;
height: auto;
}
This code will resize the image to fit the width of its container while maintaining its aspect ratio.

How can I resize an image in CSS to fit the screen?

Resizing an image in CSS to fit the screen involves using the ‘vw’ (viewport width) unit for the ‘width’ property and the ‘vh’ (viewport height) unit for the ‘height’ property. For example:

img {
width: 100vw;
height: 100vh;
}
This code will resize the image to fit the entire screen, regardless of the screen size.

How can I resize an image in CSS to fill its container?

Resizing an image in CSS to fill its container involves using the ‘object-fit’ property with the ‘fill’ value. For example:

img {
object-fit: fill;
}
This code will stretch the image to fit its container, which may distort the image if its aspect ratio is not the same as the container’s. To prevent distortion, the ‘object-fit’ property can be used with the ‘cover’ value, which will resize the image to cover the entire container while maintaining its aspect ratio, even if it has to crop some parts of the image.