使用CSS限制响应式图片的高度

Question

我的最终目标是使用仅 CSS，使流体 <img> 不会超出父/祖先元素显式设置的高度。

目前，我使用一个普通（max-width:100%; height:auto;）的流体图像和 JavaScript 来读取 img 标记中的高度/宽度属性，计算宽高比，计算图像在所需高度限制下的正确宽度，并将该宽度应用于图像的容器元素作为 max-width。这很简单，但我非常希望能够不使用 JavaScript 完成此操作。 height:100%; width:auto; 与其横向使用方式不同，我尝试了一些 Unc Dave 的旧填充盒子和绝对定位，它们能够实现此功能，但需要事先知道图像的长宽比，因此不能适用于具有不同比例的图像。因此，最终要求是 CSS 必须是比例无关的。

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

- RobW

---

我很难理解为什么 max-height: 不起作用。你能提供一个示例HTML + CSS + 图像来演示这个问题吗？ - KatieK

不起作用，请检查这个 fiddle：http://jsfiddle.net/Z9yFJ/4/。说实话，我不记得我为什么需要它了。 - RobW

没有一个解决方案能够成功地裁剪一张图片（在保持宽高比的同时限制其尺寸）。有一些帮助可以在https://uploadcare.com/blog/how-to-crop-an-image-in-css/找到。 - David Spector

我找到的解决方案是在图像上使用object-fit:cover，并在包含的div上使用width、overflow:hidden和max-height。另一种解决方案是在图像本身上使用background-image、background-size和background-position来实现精确缩放和裁剪。 - David Spector

Answer 1

关键是在.container img中添加max-height: 100%;和max-width: 100%;。示例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/

- KatieK

---

只要图片比容器高，这样就能很好地工作。谢谢。 - RobW

这种方法是最好的，但我认为最好在.container上指定'max-width'，并在htm中将'responsive'类添加到您的容器div中（<div class="mycontainer responsive">）。这样它就不会超过明确设置的高度，但在该尺寸以下仍然具有响应性。 - amchugh89

@amchugh89，这个神奇的“responsive”类是从哪里来的？ - Andy Lorenz

Answer 2

我把以下3种样式设置到我的img标签中。

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

在桌面屏幕上，图片不会超过 500px 的大小，但在小尺寸移动设备上，它会缩小到外部容器的 70%。效果很好。

它还使用了 width 属性。

- GorvGoyl

Answer 3

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

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

- William

---

不仅这并没有回答 OP 的问题（即“使用 CSS”），内联样式也是一种糟糕的做法(tm)，因为它将显示逻辑与内容混合在一起。 - Ch4ni

就布局问题而言，内联样式和文档中其他位置定义的样式没有任何区别。 - RobW