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

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

This is even more common in responsive design. It means:

• never exceed the width of the parent container
• always keep the correct aspect ratio

Example 3: Avoid forcing both dimensions incorrectly

Broken example:

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

This forces every image into a square, which can distort most images.

Correct approach:

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

or

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

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.

If height: auto were missing, the browser could keep the old height or use another conflicting rule, which may distort the image.

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 {
  max-width: 100%;
  height: auto;
}

<img class="img-fluid" src="photo.jpg" alt="Photo">

Related real-project considerations

• Use guard rails in CSS so uploaded images do not overflow containers.
• Prefer reusable classes instead of styling every image globally when only some images should scale.
• Keep HTML width and height attributes when possible because they help browsers reserve space and reduce layout shift, while CSS can still control display size.

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

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

This works well, but 100% means 100% of the parent element. If the parent is too wide, the image may still appear large.

4. Conflicting CSS rules

A second rule may override the correct one:

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

.card img {
  height: 300px;
}

Now images inside .card may be distorted.

Fix by checking which rule is winning in browser developer tools.

5. Confusing HTML attributes with CSS layout rules

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

These attributes describe image dimensions, but CSS can still control rendered size. Beginners often think the HTML attributes permanently lock the display size. They do not.

max-width vs width

• width: 500px means the image will try to be exactly 500px wide.
• max-width: 500px means the image can be smaller, but never larger than 500px.

height: auto vs fixed height

• height: auto preserves the natural proportions.
• A fixed height can distort the image unless width is matched proportionally.

/* 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

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

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;
}

This preserves the image ratio but may crop parts of the image.

Why is my image still not resizing correctly?

Check for conflicting CSS rules, inline styles, or parent container constraints using browser developer tools.

• 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.