CODEWITHSUNDEEP
cssresponsive-design
Daniel J F
Daniel J F

Reputation: 1064

Image scaling with CSS

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?

Upvotes: 11

Views: 36395

Answers (3)

ContextSwitch
ContextSwitch

Reputation: 2837

I used max-width: 100% as Filip had mentioned, but I also needed to include:

height:auto

Otherwise the height wouldn't scale.

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46599

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

Upvotes: 2

Filip
Filip

Reputation: 2522

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!

Upvotes: 23

Related Questions