A fluid image changes size with the space available in its parent container while keeping its proportions intact. It helps a responsive page fit different screens without horizontal scrolling. section 14.7 section 14.0
Use the basic rule:
- Set max-width: 100% so the image can shrink with its container but does not grow beyond its original width. section 14.7
- Set height: auto so the browser calculates height from the current width and preserves the original aspect ratio. section 14.7
- When height must not exceed the original, use max-height: 100% with width: auto instead. section 14.7
A small responsive image
img { max-width: 100%; height: auto; } As the image’s aside parent becomes narrower, the image scales down without distortion; it can scale smaller or larger, but not beyond its original dimensions. section 14.7
img {
max-width: 100%;
height: auto;
}
Inspect the minimal CSS rule that makes an image fluid. section 14.7
Fluid sizing does not require sending the same file everywhere. Combine responsive sizing with sizes and srcset when different devices should receive different image versions. section 14.8
