How CSS Calculates the Display Size of Images – A Complete Guide

Introduction

The article explains how CSS decides the final displayed size of an image, covering both <img> elements and background images. It introduces four key concepts—intrinsic size, specified size, default object size, and concrete object size—and describes the default calculation workflow.

Key Terminology

Intrinsic size : the natural width, height, and aspect‑ratio of an image (e.g., a raster image has all three, an SVG only an aspect‑ratio, a CSS gradient none).

Specified size : any explicit width, height or background-size values provided in CSS.

Default object size : the size used when neither intrinsic nor specified sizes are available; it depends on the rendering context.

Concrete object size : the actual size the image is rendered at after all calculations.

Default Calculation Process

Prefer specified size; use it to obtain the width and height.

If only one dimension is specified, use the intrinsic aspect‑ratio (if any) to compute the missing dimension; otherwise fall back to intrinsic size.

If no size is specified, first try intrinsic size; if none exists, use the default object size.

Demo Cases for <img>

<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png">

Result: 54 px × 49 px (intrinsic size).

<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30" height="30">

Result: 30 px × 30 px (both dimensions specified).

<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30">

Result: width 30 px, height 30 / (54/49) ≈ 27.22 px (height derived from intrinsic ratio).

<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" height="30">

Result: height 30 px, width 30 × (54/49) ≈ 33.06 px (width derived from intrinsic ratio).

Demo Cases for background-image

<span class="img" style="width:100px;height:100px"></span>

With background-size:auto (default), the image renders at its intrinsic size 54 px × 49 px.

<span class="img" style="width:30px;height:30px"></span>

Again auto yields the intrinsic size 54 px × 49 px.

<span class="img" style="width:30px;height:30px;background-size:10px 10px"></span>

Explicit background-size:10px 10px forces the rendered size to 10 px × 10 px.

<span class="img" style="width:30px;height:30px;background-size:contain"></span>

contain

scales the image to fit inside the 30 px × 30 px box while preserving aspect‑ratio, resulting in 30 px × 27.22 px.

<span class="img" style="width:100px;height:100px;background-size:cover"></span>

cover

scales the image to completely cover the 100 px × 100 px box, yielding a rendered size of 100 px × 100 px (the excess is clipped).

Summary of Rules

Understand the four size categories: intrinsic, specified, default object, and concrete object.

Calculate the concrete object size using the priority: specified size → intrinsic size → default object size.

Two common constraints for specified size are contain (fit inside) and cover (fill and possibly crop).

If the computed concrete size differs from the intrinsic size, the image is scaled or cropped accordingly.

For <img> elements, the object-fit property can further control scaling behavior.