Question

I have this code where I set max-width of two images to max-width:50%. At first I was expecting that each image will stretch to 50% of the screen as if I set width:50%, but the behavior is different and actually consistent in all the browsers.

Is there any validity to this behavior?

P.s. This behavior is actually what I was trying to achieve, so there is nothing to fix

<img id="hplogo-img" src="//www.google.com/logos/2002/w_olympics_02-1.gif"><img id="hplogo-img2" src="//www.google.com/logos/2002/newyear02.gif">


    img
    {
    height:100px;
    max-width:50%
    }​

Slide the frame to contract and expand the page:
http://jsfiddle.net/fQjXV/

Answer 1

max-width is just that – a maximum width. It doesn’t require that the item actually takes on that width, just that it doesn’t exceed it. So without any other restrictions, the images are just going to take on their natural width (in this case scaled to keep the aspect ratio the same with a height of 100px), so long as it doesn’t exceed 50% of the container. When you contract the container, the maximum width reduces with it, and when the maximum width becomes smaller than the image’s default width, the image contracts to 50% of the container width. The height doesn’t change because that is set explicitly.