How to Resize Images While Keeping Aspect Ratio in CSS

By the end of this page, you will understand how browsers size images, why an image can become distorted when only one dimension changes, and how to use CSS such as max-width: 100% and height: auto to resize images while preserving aspect ratio.

When an image is resized, the browser needs to know how to calculate its width and height.

An image has an intrinsic aspect ratio, which is the relationship between its width and height. In this example:

• width = 900
• height = 600
• aspect ratio = 900 / 600 = 1.5

If you shrink the width, the height should shrink proportionally too. Otherwise, the image becomes stretched or squashed.

In HTML, the width and height attributes provide the browser with dimensions. In CSS, if you set only max-width, the browser may limit the width but still keep the explicit height from the attributes unless you also allow the height to adjust automatically.

The usual fix is:

img {
  max-width: 500px;
  height: auto;
}

height: auto tells the browser: “calculate the height based on the current width and the image’s aspect ratio.”

This matters in real programming because responsive layouts often need images to scale to fit containers, cards, articles, product pages, and mobile screens without distortion.

Think of an image like a printed photo in a frame.

• If you make the frame narrower but keep the old height, the photo gets squeezed.
• If you resize both dimensions proportionally, the photo keeps its original shape.

So:

• width controls horizontal size
• height controls vertical size
• height: auto means “adjust the height naturally to match the width”

The most common pattern for preserving aspect ratio is:

img {
  max-width: 500px;
  height: auto;
}

Example 1: Fixed maximum width

<img src="big_image.jpg" width="900" height="600" alt="Landscape photo">

img {
  max-width: 500px;
  height: auto;
}

If the image is larger than 500px wide, it will shrink down to 500px and the height will be calculated automatically.

For a 900x600 image:

• new width = 500px
• new height = 600 × (500 / 900)
• new height ≈ 333px

Example 2: Responsive images inside a container

Consider this HTML and CSS:

<img src="big_image.jpg" width="900" height="600" alt="Example image">

img {
  max-width: 500px;
  height: auto;
}

Here is what happens step by step:

1. The browser reads the image element.
2. It sees the original dimensions: 900x600.
3. It calculates the image’s aspect ratio: 900 / 600 = 1.5.
4. The CSS says the image cannot be wider than 500px.
5. Since 900px is larger than 500px, the browser scales the width down to 500px.
6. Because height: auto is set, the browser calculates the matching height using the original ratio.
7. The new height becomes approximately 333px.
8. The image is displayed at 500x333, keeping the original shape.

Image resizing with preserved aspect ratio is used in many common situations:

• Responsive websites: article images scale down on phones and tablets
• Product cards: store listings show smaller versions of large product photos
• User uploads: profile pictures or gallery images must fit within layout limits
• Blog content: large images should not overflow the content column
• Admin dashboards: thumbnails need to fit containers without looking stretched
• Email templates: images often need to shrink to smaller screens safely

Example in a content area:

.article-content img {
  max-width: 100%;
  height: auto;
}

This ensures inserted images never break the article layout.

In real projects, developers usually do more than just resize a single image.

A common pattern is:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Why this is common:

• max-width: 100% prevents overflow
• height: auto preserves aspect ratio
• display: block removes extra inline spacing issues in some layouts

Common usage patterns

1. Responsive content images

.content img {
  max-width: 100%;
  height: auto;
}

2. Constrained thumbnails

.thumbnail img {
  max-width: 200px;
  height: auto;
}

3. Utility class approach

.img-fluid {
  : ;
  : auto;
}

1. Setting only max-width and forgetting height: auto

img {
  max-width: 500px;
}

This may not be enough if another height value is still being applied.

Fix:

img {
  max-width: 500px;
  height: auto;
}

2. Forcing both width and height

Broken code:

img {
  width: 500px;
  height: 600px;
}

This ignores the original proportions and can distort the image.

Fix:

img {
  width: 500px;
  height: auto;
}

3. Using max-width: 100% without understanding the parent width

 {
  : ;
  : auto;
}

/* Safe responsive image pattern */
img {
  max-width: 100%;
  height: auto;
}

/* Limit image to a maximum width */
img {
  max-width: 500px;
  height: auto;
}

/* Fixed width with preserved ratio */
img {
  width: 300px;
  height: auto;
}

Rules to remember

• Use height: auto to preserve aspect ratio.
• Use max-width when you want a size limit.
• Use max-width: 100% for responsive layouts.
• Avoid setting both width and height unless you intentionally want a fixed box.
• HTML width and height attributes do not prevent CSS from resizing the image.

Common formula

new height = original height × (new width / original width)

Good default for many projects

Why does my image stretch when I change only the width?

Because the height may still be fixed by HTML attributes or another CSS rule. Set height: auto so the browser recalculates the height proportionally.

Should I use width or max-width for images?

Use max-width when you want the image to shrink only if needed. Use width when you want a specific width every time.

Is max-width: 100% the best option for responsive images?

Yes, it is one of the most common and useful patterns. Pair it with height: auto.

Do HTML width and height attributes break responsive images?

No. CSS can still resize the image. In fact, keeping those attributes can help reduce layout shift while loading.

What if I want all images to fit a fixed box?

Use a set width and height with object-fit, for example:

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

• CSS width and height — Fundamental sizing properties used when displaying images.
• Responsive web design — Images often need to adapt to different screen sizes.
• CSS max-width — Useful for limiting element size without forcing a fixed width.
• Aspect ratio — The core idea behind proportional image resizing.
• object-fit — Helps fit images into fixed-size containers without manual cropping.
• HTML image attributes — width and height affect initial sizing and layout.
• CSS box model — Parent container size often affects how images render.