63

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

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

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

我知道，我知道，这个问题的答案可能就在独角兽农场旁边，但我想我还是把它扔在那里。

4

3 回答 3

90

诀窍是同时添加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（例如 200 像素或 10%），并且图像不会大于其自然尺寸。（如果您不想依赖图像的自然大小，可以指定像素而不是 100%。）

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

于 2013-01-17T23:40:12.223 回答
3

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

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

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

它也适用于width财产。

于 2018-01-14T18:41:16.080 回答
-9

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

<img src="" class="img-responsive" alt="" style="max-height: 400px;">
于 2015-02-10T21:17:28.280 回答