I'm learning Journey into Mobile course in Code School. In level 5 Responsive Media, I was told to apply
img, embed, object, videoelements. I wondered why it is
width:100%;? After Googling I didn't find the answer, but someone asked on Stackoverflow too. So I tried to answer it myself.
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.
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.
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
Screen capture of the experiment: (the sketch image is 600 px * 432 px)
Web page of the experiment: here
Original post on Stackoverflow: here