HTML Fluid Images with CSS
Fluid images scale with whatever box they sit in, so they look great on a phone and a 4K monitor without you lifting a finger. It takes about two lines of CSS. Play with the sliders below and watch the image flow, then copy the exact CSS you need.
Drag the bottom-right corner of the frame to resize the container and watch the image adapt.
The whole trick in two lines
Ninety percent of the time, fluid images come down to this:
img { max-width: 100%; height: auto; }
max-width: 100% stops the image from ever spilling out of its container, and height: auto keeps the proportions correct as the width changes.
width vs max-width
max-width: 100%
The safe choice. The image shrinks to fit smaller containers but never blows up past its natural size, so it stays sharp.
width: 100%
Forces the image to always fill the container, even stretching a small image larger. Handy for full-width banners, risky for icons.
height: auto
Lets the height follow the width so nothing looks squashed. Almost always what you want with fluid images.
Add media queries
Want the image to take half the width on big screens? Drop a media query on top of the fluid base and you are set.
Pair it with a media query
Fluid by default, then narrower on wide screens. A common pattern looks like this:
img { width: 100%; } @media (min-width: 720px) { img { width: 50%; } }
Frequently asked questions
How do I make an image fluid in CSS?
Set max-width: 100% and height: auto. The image scales down to fit its container, keeps its aspect ratio, and never overflows.
What is the difference between width and max-width at 100%?
width: 100% always fills the container, even enlarging small images. max-width: 100% only shrinks when the container is smaller, never going past the natural size.
Why do I need height auto?
It lets the height follow the width so the aspect ratio stays correct. Without it, the image can look stretched or squashed when the width changes.
Does this work with srcset?
Yes, perfectly. Fluid CSS controls how the image is displayed, while srcset controls which file is downloaded. Use both together.
Further reading: the MDN max-width reference, Wikipedia on responsive web design, and Google's web.dev design course.
Fluid display is half the story. Serve the right file size too.
Build responsive srcset markup→