Responsive Images and Videos with CSS

Responsive images and videos shrink to fit any screen. Learn max-width: 100%, height auto, object-fit, responsive backgrounds, responsive video embeds with aspect-ratio, and the picture element.

Why images break mobile layouts

An image is shown at its real size by default. A photo that is 1600 pixels wide stays 1600 pixels wide on a 390-pixel phone, so it sticks out of the page and makes everything scroll sideways. Responsive images fix this: they shrink to fit their container, but never stretch bigger than their real size.

The basic rule: max-width: 100% and height: auto

This small rule is in nearly every website's CSS:

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

• max-width: 100% says "never be wider than your parent". On a big screen the image keeps its natural size; on a small screen it shrinks.
• height: auto keeps the proportions, so the image shrinks evenly instead of getting squashed. It's needed because you often write width and height attributes in the HTML.
• display: block removes the small gap under images that appears because images are inline by default.

<article class="post">
  <h2>Our trip to Lisbon</h2>
  <img src="https://picsum.photos/id/1040/1600/900" width="1600" height="900" alt="Old castle on a hill above the city">
  <p>We spent three sunny days walking the steep streets.</p>
</article>

.post {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
}

On a laptop, the photo fills the width of the 700px article (minus its padding). On a phone, it shrinks with the screen. It is never cut off or stretched.

Tip: Always keep the width and height attributes in your HTML. The browser uses them to reserve the right space before the image loads, so the text doesn't jump down when the picture appears. Together with height: auto in CSS, the image stays responsive.

Common mistake: Using width: 100% instead of max-width: 100%. Then a small 200px logo gets stretched to fill a wide container and looks blurry. max-width only shrinks; it never enlarges.

Cropping images with object-fit

Sometimes you need every image at the same shape, like a row of product photos, even though the originals have different shapes. Setting a width and height alone would squash them. object-fit (which you met in the Modern Layout Tricks lesson) tells the image how to fill its box:

Value	What happens
fill	Stretches to fill the box (default, can distort).
cover	Fills the box completely and crops the extra parts.
contain	Shows the whole image inside the box, leaving empty space.
none	Keeps the natural size and crops.
scale-down	Uses none or contain, whichever is smaller.

.product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}

Every product image is now a perfect square that is as wide as its card. Nothing is squashed: the extra parts are cropped, and object-position: center top keeps the top of the photo visible (good for portraits, where faces are near the top).

Responsive background images

Images added with background-image aren't affected by max-width. Use background-size instead:

<header class="banner">
  <h1>Fresh bread every morning</h1>
</header>

.banner {
  min-height: 50vh;
  display: grid;
  place-items: center;
  color: white;
  background-color: #78350f;
  background-image: url("https://picsum.photos/id/292/1600/900");
  background-size: cover;
  background-position: center;
}

@media (max-width: 600px) {
  .banner {
    min-height: 40vh;
    background-image: url("https://picsum.photos/id/292/800/600");
  }
}

background-size: cover makes the image always fill the banner, cropping the edges on narrow screens. background-position: center keeps the middle visible. The media query loads a smaller image on phones, which saves data. The background-color shows while the image loads, and keeps the white text readable if it fails.

Responsive video embeds with aspect-ratio

A <video> element works with the same max-width: 100%; height: auto; rule. But embedded players from YouTube or Vimeo use an <iframe>, which doesn't keep its shape automatically. The modern fix is aspect-ratio:

<div class="video">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="How to bake sourdough bread" allowfullscreen></iframe>
</div>

.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

The video player is always as wide as its container and keeps a 16:9 TV shape at every screen size. Replace VIDEO_ID with a real video's ID. Before aspect-ratio was supported, people used a wrapper with padding-top: 56.25% and an absolutely positioned iframe. You'll still see that "padding hack" in old code, but you don't need it anymore.

Pointer: the picture element and srcset

CSS makes an image fit the screen, but a phone still downloads the big 1600px file. HTML can fix that. The srcset attribute lists several sizes so the browser downloads the smallest good one, and the <picture> element lets you show a different crop or format (like AVIF or WebP) on different screens:

<picture>
  <source media="(max-width: 600px)" srcset="team-square.jpg">
  <img src="team-wide.jpg" alt="Our team of six smiling in the office" width="1200" height="600">
</picture>

Phones get a square crop; larger screens get the wide photo. Your CSS rules for img still apply to the <img> inside. You can read more on MDN's responsive images guide.

Practice exercise

Make a "travel blog" page with a full-width header background image, an article with two large photos, a grid of six square thumbnails, and an embedded video. Make sure nothing causes sideways scrolling on a phone, the thumbnails are all square without distortion, and the video stays 16:9.

Hint: test in DevTools device mode at 375px wide, and look for any element wider than the screen.

Key takeaways

• img { max-width: 100%; height: auto; } makes images shrink to fit without distortion.
• Use max-width, not width: 100%, so small images aren't stretched.
• object-fit: cover crops images to a fixed shape; contain shows the whole image.
• Background images need background-size: cover and background-position.
• Make iframes responsive with width: 100% and aspect-ratio: 16 / 9.