Image Dimensions and Aspect Ratio

Image dimensions describe an image's intrinsic width and height, while aspect ratio describes the relationship between them. Preserving these values in the layout helps the browser reserve the correct space before an image finishes loading, reducing layout shifts.

An image has intrinsic dimensions, such as `1200 × 800` pixels. Its aspect ratio is the width divided by the height, so this example has a `3:2` ratio. The ratio describes shape independently of the image's physical display size.

Frontend layouts should communicate an image's expected dimensions whenever possible. HTML `width` and `height` attributes let the browser calculate the aspect ratio and reserve space before the image resource is available, which helps prevent content from jumping when the image appears.

CSS can control the rendered size without changing the image's intrinsic pixel dimensions. Properties such as `width`, `height`, `max-width`, and `aspect-ratio` determine how the element participates in layout. `object-fit` can then control how the image content fits inside a fixed box.

If an image is displayed at a different ratio from its source, it may be cropped, distorted, or letterboxed depending on the CSS. `object-fit: cover` preserves the image's proportions while cropping overflow, whereas `object-fit: contain` preserves the whole image and may leave empty space.

Key points

• Intrinsic dimensions are the source image's natural width and height.
• Aspect ratio is the proportional relationship between width and height.
• HTML `width` and `height` help reserve image space before loading.
• CSS `aspect-ratio` can establish a predictable layout box.
• `object-fit` controls how an image fits within its rendered box without distorting it.

Interview questions

What is the difference between intrinsic dimensions and CSS-rendered dimensions?

Intrinsic dimensions belong to the image resource itself, such as its pixel width and height. CSS-rendered dimensions describe how large the image element appears in the document. A browser can display a `1200 × 800` image at `600 × 400` while preserving its `3:2` ratio. Therefore, a displayed image does not need to be rendered at its intrinsic pixel size.

What is an image's aspect ratio, and why does it matter in frontend layout?

Aspect ratio is the relationship between an image's width and height. For example, a `1200 × 800` image has a `3:2` ratio. Keeping that ratio predictable lets the browser reserve an appropriately shaped area before the image loads. This reduces unexpected movement of surrounding content.

Why would you specify both `width` and `height` on an `<img>` element?

They provide the browser with the image's expected dimensions before the image has finished downloading. The browser can use their ratio to establish the element's geometry during layout. This reduces layout shifts when the image becomes available. CSS can still scale the image responsively afterward.

How do `object-fit: cover` and `object-fit: contain` differ?

Both preserve the source image's proportions when fitting it into a replaced-element box. `cover` scales the image until the box is completely filled, so portions can be cropped. `contain` scales it so the entire image remains visible, which can leave unused space in the box. The choice depends on whether filling the box or showing the complete image is more important.

How would you prevent layout shifts caused by responsive images?

I would make the expected image geometry known before the resource loads. For standard images, I would provide appropriate `width` and `height` attributes or establish an explicit CSS `aspect-ratio`. I would then use responsive sizing such as `max-width: 100%` without changing the intended proportions. For varying image sources, I would make sure the selected resources have compatible dimensions or reserve a box with the intended ratio.