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

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

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