Responsive Images

Choose between preserving an image's natural proportions and fitting a designed image slot.

Intrinsic proportions

Tree-covered hills reflected in a lake

max-width: 100% prevents overflow, while height: auto preserves the image's intrinsic ratio as it shrinks.

Designed image slots

Tall forest path cropped into a landscape frame — cover fills the 4 / 3 slot and may crop the image.

Tall coastal cliff fully visible inside a landscape frame — contain shows the complete image and may leave empty space.

Important CSS

Fluid images and designed slots use different object-fit strategies.

.fluid-image {
  max-width: 100%;
  height: auto;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}