Question

我的最终目标是让流量<img>不会仅使用css扩展超过父/祖父素元素的显式设置高度。

目前我正在使用普通（max-width:100; height:auto;）流体图像和javascript，通过从img标签读取高度/宽度属性，计算纵横比，计算所需图像的正确宽度高度限制，并将该宽度应用于图像的容器元素上的max-width。非常简单，但我希望能够在没有javascript的情况下完成它。

height:100%; width:auto;与横向不同，我尝试过使用Unc Dave的ol'填充框和绝对定位功能，但需要预先知道图像的宽高比，因此不能应用于具有不同比例的图像。所以最后的要求是css必须与比例无关。

我知道，我知道，这个问题的答案可能就是坐在麒麟农场的旁边，但我还以为我会把它扔到那里。

Answer 1

诀窍是将max-height: 100%;和max-width: 100%;添加到.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/

Answer 2

我将以下3种样式设置为img标记

max-height: 500px;
height: 70%;
width: auto;

它对桌面屏幕img的作用不会超过500px，但对于小型移动屏幕，它将缩小到外部容器的70％。奇迹般有效。

它也有效width属性。

Answer 3

您可以使用内联样式来限制高度：

<img src="" class="img-responsive" alt="" style="max-height: 400px;">

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

3 个答案: