A CSS replaced element represents content whose internal rendering lies outside the ordinary CSS formatting of the element's descendants. An image element displaying its image is a standard example. CSS can size and position the element's surrounding box, while the image's own dimensions or aspect ratio can help determine that size.[ref]
Suppose an image has intrinsic dimensions and no extra padding or borders. With
width: 200px; height: auto, preserving its intrinsic ratio gives a content height of 100 CSS pixels. The source image's pixel counts and the rendered CSS dimensions therefore have distinct roles. Choosing both dimensions explicitly can instead impose a different box ratio.Replaced content is not synonymous with block layout. The same image can participate as an inline-level box in a line or be given a block-level display role. The distinction also matters to CSS vertical alignment, because an inline replaced box is aligned as a unit rather than as a run of ordinary text.
A broken or unavailable image can have specified fallback behavior, so an element's tag name alone is not a complete description of every rendering state. For a concrete sizing calculation, state what content is being replaced, which intrinsic information is available and which CSS dimensions constrain the resulting box.
New to topics? Read the docs here!