Chapter 14: Images & Object Fitting

Images are often the heaviest and most visually significant part of a website. In modern web design, images rarely stay at their original dimensions. They must adapt to fluid containers, fill heroic backgrounds, and maintain their aspect ratios across all screen sizes. This chapter explores the tools CSS provides to handle images with precision.

1. The Core Problem: Aspect Ratios

Images have a fixed width and height (the aspect ratio). If you force an image into a container with a different ratio, the browser will either stretch it or leave empty space.

.forced-image {
  width: 300px;
  height: 200px; /* If the image was square, it now looks squashed */
}

2. Using `object-fit`

The object-fit property tells the browser how to resize an image to fit its container. Below, we use a sample image of a bracket fungus to illustrate each mode.

cover: Fills the entire container. The image is scaled to be as large as possible so that the container is completely filled. Parts of the image will be cropped if its ratio differs from the container.
contain: The entire image is visible. The image is scaled to fit inside the container without being cropped or stretched. This often leaves "empty" space (letterboxing).
fill: The default behavior. The image is stretched or squashed to exactly match the container's dimensions, ignoring the original aspect ratio.
none: The image maintains its original size and is centered within the container.

Visual Comparison

object-fit: cover

object-fit: contain

object-fit: fill (stretched)

3. Creating Modern Aspect Ratios

Instead of calculating pixels, you can use the aspect-ratio property to let the browser handle the height based on the width.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.avatar {
  width: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

4. Responsive Images with `max-width`

A classic CSS rule for making images "fluid" is setting max-width: 100%. This prevents images from being larger than their containers.

img {
  max-width: 100%;
  height: auto; /* Maintains the ratio as the width changes */
  display: block; /* Removes the small gap at the bottom of images */
}

5. Filtering and Effects

CSS can also modify the appearance of an image directly.

.hero-image {
  filter: grayscale(100%) blur(5px);
  opacity: 0.8;
  transition: filter 0.3s ease;
}

.hero-image:hover {
  filter: grayscale(0%) blur(0px);
}

6. Practical Image Card

.image-card {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.image-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-card:hover img {
  transform: scale(1.05);
}

7. Debugging Checklist

Is the image squashed? (Check if you set both width and height without object-fit).
Is there a weird gap under the image? (Images are inline by default; set them to display: block).
Is object-fit not working? (Ensure the image has a defined width and height, or a parent container has a fixed size).
Is the high-resolution image slowing down the page? (CSS can't fix this; use srcset or smaller files).
Does the image break the layout on mobile? (Ensure max-width: 100% is applied).

Images & Object Fitting