我的最终目的是要有一个流体的“img”它不会扩展到仅使用css的父/祖父母元素的显式设置高度。
目前,我正在使用正常(max-width:100; height:auto;)流体图像和javascript,通过从img标签读取height / width属性,计算宽高比,计算图像的正确宽度所需的高度限制,并将该宽度作为最大宽度应用在图像的容器元素上。很简单,但我很想能够做到没有javascript。
高度:100%;宽度:汽车;不像其横向工作一样,我已经尝试了Unc Dave的填充盒和绝对定位功能,但需要事先知道图像的宽高比,因此不能应用于具有不同比例的图像。所以最终的要求是css必须是不可比拟的。
我知道,我知道,这个问题的答案可能是坐在独角兽农场旁边,但是我以为我会把它丢在那里。
解决方法
诀窍是添加max-height:100%;和最大宽度:100%;到.container img示例CSS:
.container { width: 300px; border: dashed blue 1px; } .container img { max-height: 100%; max-width: 100%; }
这样,您可以以任何您想要的方式(例如200像素或10%)来更改.container的指定宽度,并且图像将不会大于其自然尺寸。 (如果您不想依赖图像的自然大小,则可以指定像素而不是100%)。