Images

CSS Images Summary

CSS controls how images fit inside a layout. The most common responsive image rule prevents an image from becoming wider than its container while preserving its proportions.

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

Large Images Can Overflow

Image files have natural dimensions. An image that is 800 pixels wide will normally try to display at that width unless HTML or CSS gives it a different size.

If the image is placed inside a narrower container, it may extend beyond the container and create horizontal scrolling.

The HTML images lesson explains the image element, source, alternative text, and width and height attributes.

Keep Images Inside Their Containers

The rule max-width: 100% allows an image to use its natural size, but prevents it from becoming wider than its container.

img {
	max-width: 100%;
}

When the container becomes narrower, the image shrinks with it. When the container is wider than the image, the image stays at its original size.

Preserve The Image Proportions

When an image width changes, its height should usually change by the same proportion.

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

The value auto lets the browser calculate the correct height. This prevents the image from looking stretched or squeezed.

Width And Max-Width Behave Differently

The rule width: 100% makes an image fill the full width of its container.

.banner {
	width: 100%;
	height: auto;
}

This can enlarge a small image when its container is wider than the original file.

The rule max-width: 100% allows the image to shrink but does not force it to grow. Use width: 100% when the image should fill the container and max-width: 100% when it should keep its natural size whenever possible.

Object-Fit Controls Cropping

Sometimes an image needs to fill a box with a fixed width and height. The object-fit property controls how the image fits inside that box.

.card-image {
	width: 300px;
	height: 180px;
	object-fit: cover;
}

The value cover fills the box while preserving the image proportions. Part of the image may be cropped.

.product-image {
	width: 300px;
	height: 180px;
	object-fit: contain;
}

The value contain keeps the entire image visible. Empty space may remain when the image and box have different proportions.

Display Block Removes The Inline Gap

Images are inline elements by default. This can leave a small space below an image because the browser aligns it with nearby text.

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

Using display: block removes that text-alignment gap and often makes images easier to place inside layouts.

Test Images At Different Widths

Resize the browser and check that images remain inside their containers. Look for horizontal scrolling, stretched proportions, unwanted cropping, and images that become blurry when enlarged.

For most content images, max-width: 100% and height: auto provide the correct starting point.