How to resize an image proportionally with CSS

In modern responsive web pages, improperly resized images can distort layouts, slow down websites, and affect the overall design. One important skill for developers is understanding how to use proportional image resizing with CSS.

Proportional resizing ensures images maintain their original aspect ratio, providing a consistent layout across devices. With CSS, you can resize images efficiently while optimizing for performance and maintaining responsiveness. In this Answer, we’ll explore the following CSS techniques to resize an image proportionally:

1. Using width and height

2. Using the aspect-ratio property

3. Using the max-width property

4. Using the object-fit property

1. Using width and height

By setting only the width or height property, CSS automatically adjusts the other dimension to maintain the image's aspect ratio.

Let's look at an example below.

Code explanation

• Line 8: width: 100% scales the image to fit its container’s width

• Line 9: height: auto maintains the aspect ratio.

2. Using the aspect-ratio property

The aspect-ratio property is a modern solution for ensuring proportional resizing. It simplifies calculations by letting you define the aspect ratio directly and thus ensures compatibility with responsive designs.

Let's look at an example below.

Code explanation

• Line 8: aspect-ratio: 16 / 9 specifies the width-to-height ratio of the image (e.g., 16:9 for widescreen).

• Line 8–9: width: 100% and height: auto ensures the image scales proportionally within its container

3. Using the max-width property

max-width ensures that the image doesn’t exceed its container’s width. Let's look at an example below.

Explanation

• Line 8: max-width: 100% restricts the image’s width to the maximum width of its parent container.

• Line 9: height: auto automatically adjusts the height to preserve proportions.

4. Using the object-fit property

When images are placed in containers of specific dimensions, the object-fit property ensures the image fits without distortion or cropping. Let’s look at an example below.

Code explanation

• Lines 14–15: width: 100% and height: 100% matches the dimensions of the image to the container.

• Line 16: object-fit: contain ensures the entire image fits within the container, maintaining proportions.

By understanding these techniques and applying them in the appropriate contexts, you can effectively resize images proportionally using CSS, creating layouts that are both visually appealing and responsive. Each method has its strengths, making it easy to adapt to various design scenarios.