Skip to content
BSWEN
Blog

How to Make Images Responsive in CSS: The Fluid Image Approach

Cowrie
Cowrie
Dev @ Bswen

Website layout sketches representing responsive design concepts

When I build a responsive website, one of the first problems I encounter is images breaking the layout. Large images overflow their containers on mobile screens, causing horizontal scroll bars and cut-off content. Small images stretched to fill wider containers become blurry and pixelated.

Problem

I have an image in a flexible container. On a desktop screen, it looks fine. But when I test on my phone, the image overflows the viewport:

Mobile viewport screenshot
┌──────────────────────────────────────────────┐
│  Container (narrow)                           │
│    ┌────────────────────────────────────────┐ │
│    │ Image (too wide - overflow!)           │ │
│    │                              →→→→→     │ │
│    └────────────────────────────────────────┘ │
│                                               │
│  Horizontal scrollbar appears...              │
└──────────────────────────────────────────────┘

The core issue: fixed-width images don’t adapt to their containing element’s width.

Environment

  • CSS (any modern browser)
  • Responsive website layout
  • Images with various intrinsic dimensions

What happened?

I placed an image inside a flex container that shrinks on smaller screens:

My initial HTML
<div class="container">
  <img src="hero-image.jpg" alt="Hero" width="1200" height="800">
</div>
My initial CSS (WRONG)
.container {
  max-width: 960px;
  margin: 0 auto;
}


/* No width styling on the image! */

The image has a natural width of 1200 pixels. On a 375px mobile screen, the container shrinks to fit, but the image still renders at 1200px. The image breaks out of the container, creating horizontal overflow.

I tried setting width: 100% on the image:

Attempt #1 - WRONG
img {
  width: 100%;
}

This forces the image to stretch to fill its container on large screens. A 400px image inside a 1200px container gets stretched to 1200px, becoming blurry and pixelated. This is not what I want.

How to solve it?

The correct approach is the “fluid image” technique from Ethan Marcotte’s original responsive design definition:

The fluid image fix
img,
picture,
video {
  max-width: 100%;
}

This single rule makes images responsive:

  • Images shrink proportionally when their container narrows
  • Images never grow beyond their natural (intrinsic) size
  • The aspect ratio is maintained automatically

Let me explain what max-width: 100% does:

max-width behavior
Container width = 500px, Image intrinsic width = 800px
→ Image renders at 500px (shrinks to fit)


Container width = 1200px, Image intrinsic width = 400px
→ Image renders at 400px (stays at natural size, won't stretch)


Container width = 400px, Image intrinsic width = 400px
→ Image renders at 400px (exact match)

Now I test again on mobile:

Updated CSS
.container {
  max-width: 960px;
  margin: 0 auto;
}


img,
picture,
video {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}

The image scales down to fit the narrow mobile container without overflow.

The reason

The key difference between width: 100% and max-width: 100%:

  • width: 100% means: “Always be exactly the width of your container” (forces stretching)
  • max-width: 100% means: “Never be wider than your container, but stay at your natural size if possible”

MDN’s responsive design guide explains that fluid images scale down when their containing column narrows but do not grow larger than their intrinsic size when the column grows. This prevents pixelation from over-scaling small images.

Advanced: Different images for different devices

For production sites, using a single large image and scaling it down wastes bandwidth. Mobile users download a 1200px image that displays at 300px.

The <picture> element solves this:

Responsive image with srcset
<picture>
  <source media="(min-width: 800px)" srcset="hero-large.jpg">
  <source media="(min-width: 400px)" srcset="hero-medium.jpg">
  <img src="hero-small.jpg" alt="Hero image">
</picture>

This serves different image files based on viewport width:

  • Large screens get the high-resolution hero-large.jpg
  • Medium screens get hero-medium.jpg
  • Small screens get the bandwidth-efficient hero-small.jpg

Summary

In this post, I showed how to make images responsive using max-width: 100%. The key point is that this rule lets images shrink to fit their container without stretching beyond their natural size. For production sites, combine this with the <picture> element to serve optimized images per device.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: