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

Question

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

这种行为是否有效？

Ps 这种行为实际上是我试图实现的，所以没有什么可以修复的

<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 就是这样 - 最大宽度。它不要求该项目实际采用该宽度，只是它不超过它。因此，在没有任何其他限制的情况下，图像只会采用它们的自然宽度（在这种情况下，缩放以保持纵横比与 100 像素的高度相同），只要它不超过容器的 50%。当你收缩容器时，最大宽度随之减小，当最大宽度变得小于图像的默认宽度时，图像收缩到容器宽度的 50%。高度不会改变，因为它是明确设置的。