Monday, April 29, 2013

Using max-width vs width in Responsive Web Design

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

No comments:

Post a Comment