Image Aspect Ratio: Fix Distorted Images and Layout Shifts

What an incorrect aspect ratio means

An image has an incorrect displayed aspect ratio when its rendered width and height do not preserve the proportions of the source file. A 1200 by 800 image has a 3:2 ratio. Forcing it into a square without intentional cropping stretches or compresses the visual.

This problem can make product images, screenshots, logos, and faces look distorted. Missing dimensions can also prevent the browser from reserving space before an image loads, contributing to Cumulative Layout Shift.

Choose the intended behavior

There are two valid outcomes:

• Preserve the complete image. Keep width and height proportional and allow one dimension to calculate automatically.
• Crop the image into a designed frame. Give the frame a ratio and use object-fit: cover so the image is cropped rather than stretched.

Do not force both dimensions to values that conflict with the source ratio unless distortion is an intentional effect.

Preserve the full image

<img src="dashboard.png" width="1200" height="800" alt="Screpy website audit dashboard">

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

The width and height attributes communicate the intrinsic ratio. Responsive CSS can still scale the image while preserving that ratio.

Crop into a fixed design

.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Use a focal-position rule when the important part of an image would otherwise be cropped. For logos and diagrams, contain is often safer than cover.

Responsive image checks

1. Confirm that every srcset candidate represents the same composition and ratio unless art direction is intentional.
2. When using the picture element for art direction, provide dimensions or ratio information for each source.
3. Test the smallest and largest container widths.
4. Check lazy-loaded images because a missing placeholder size can create a shift later in the page.
5. Verify CSS from parent components; fixed heights, grid rows, and inherited object-fit rules often cause the distortion.

SVG, background, and generated images

SVG files should have a useful viewBox. CSS background images use background-size instead of object-fit. Generated thumbnails should be created at the final intended ratio where possible, which reduces unpredictable cropping and unnecessary bytes.

How to verify the fix

Compare the intrinsic and rendered dimensions in browser developer tools. Resize the viewport, confirm that the subject is not stretched, and run a layout-shift check. The web.dev guide to optimizing Cumulative Layout Shift explains why image dimensions and reserved space matter.