我的最终目标是拥有液体<img>仅使用 css 不会扩展超过父/祖父元素的显式设置高度。
目前我正在用正常的（max-width:100; height:auto;）流体图像和 javascript，通过从 img 标签读取高度/宽度属性，计算长宽比，计算所需高度限制下图像的正确宽度，并将该宽度应用为max-width在图像的容器元素上。非常简单，但我希望能够在没有 JavaScript 的情况下完成它。
height:100%; width:auto;与横向的工作方式不同，我已经尝试使用 Unc Dave 的 ol' 填充框和绝对定位来实现该功能，但需要事先知道图像的长宽比，因此不能应用于具有不同比例的图像。所以最终的要求是 CSS 必须与比例无关。
我知道，我知道，这个问题的答案可能就在独角兽农场旁边，但我想无论如何我都会把它扔在那里。
诀窍是将两者都添加max-height: 100%; and max-width: 100%; to .container img。 CSS 示例：
.container {
width: 300px;
border: dashed blue 1px;
}
.container img {
max-height: 100%;
max-width: 100%;
}
通过这种方式，您可以改变指定的宽度.container以任何您想要的方式（例如 200px 或 10%），并且图像将不会大于其自然尺寸。 （如果您不想依赖图像的自然大小，则可以指定像素而不是 100%。）
这是整个小提琴：http://jsfiddle.net/KatieK/Su28P/1/ http://jsfiddle.net/KatieK/Su28P/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
