使用CSS限制响应图像的高度

我的最终目的是要有一个流体的“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％)。

这是整个小提琴：http://jsfiddle.net/KatieK/Su28P/1/

原文地址：https://www.jb51.cc/css/218441.html