I'm learning Journey into Mobile course in Code School. In level 5 Responsive Media, I was told to apply
max-width:100%; style on img, embed, object, video elements. I wondered why it is max-width:100%; but not width:100%; ? After Googling I didn't find the answer, but someone asked on Stackoverflow too. So I tried to answer it myself.My answer:
I have the same question and I think this is the answer after doing a little experiment:
width:100%; scales the width of an image no matter what happens.
- When
100%is greater than the original resolution of that image, the image keeps scaling and thus looks blurry. - When height is assigned to that image, the width keeps scaling and thus becomes stretched.
max-width:100%; scales the width of an image more carefully.
- When
100%is greater than the original resolution of that image, the image stops scaling and looks delicate. - When height is assigned to that image, the width stops scaling and keeps the aspect ratio.
So i think this is the reason why people are using
max-width rather than width.
Screen capture of the experiment: (the sketch image is 600 px * 432 px)
Web page of the experiment: here
Original post on Stackoverflow: here
