Image scaling with CSS

Question

I don't actually need it now, but just out of curiosity...

Suppose we have a fluid website layout that works perfectly well on 1920px displays and on small smartphones. Now let's say we have images there and obviously (obviously?) we want to scale them. We've uploaded 2560px images on a server (because who cares about bandwidth nowadays) and set width: 100% property to the img tag.

So we have two users: a programmer with a 1920px display, let's call him Jo, and a female student with a smartphone, let's call her Nancy (because everything is better with Nancy, right?).

Jo and Nancy are happy because our plan with images scaling using width: 100% works, but what if we decided to show small images too, something like 400px width? Nancy won't notice anything, but for Jo it would be a disaster.

So the question is: can we make Jo and Nancy happy without using JavaScript?

Answer 1

Why not go for the max-width: 100% instead?

This will leave all the images that are smaller than the width of the screen alone and the ones that are wider than the screen will be resized too 100%. Problem solved, everyones happy!

Answer 2

If you want to send different pictures to different screens based on their widths, you should dive into those conditional media queries we keep hearing about.
This is a nice website: http://webdesignerwall.com/tutorials/css3-media-queries