相对最大宽度的预期行为是什么

Question

我有这段代码，其中我将两个图像的最大宽度设置为最大宽度：50％。起初，我期望每张图片都能够伸展到屏幕的50％，就好像我将宽度设置为50％一样，但行为不同并且在所有浏览器中都是一致的。

这种行为是否有效？

P.s.这种行为实际上是什么，我想实现的，所以任何事情来解决

<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% 
    }​ 

滑动帧收缩和扩张的页面： http://jsfiddle.net/fQjXV/

Answer 1

最大宽度就是这样 - 最大宽度。它并不要求该项目实际上占用了这个宽度，只是它没有超过它。因此，没有任何其他限制，只要图像不超过容器的50％，图像就会采用它们的自然宽度（在此情况下缩放以保持纵横比与高度100px相同）。当您收缩容器时，最大宽度会随之缩小，并且当最大宽度小于图像的默认宽度时，图像会缩小到容器宽度的50％。高度不会改变，因为这是明确设置的。