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

Posted 2023-03-06

【中文标题】使用 css 限制响应式图像的高度

【英文标题】：Limit the height of a responsive image with css

【发布时间】：2012-11-17 22:50:31

【问题描述】：

我的最终目标是拥有一个流畅的<img>，它不会扩展超过仅使用 css 的父/祖父元素的明确设置的高度。

目前我正在使用普通 (max-width:100; height:auto;) 流体图像和 javascript 执行此操作，方法是从 img 标记读取高度/宽度属性，计算纵横比，在所需高度限制下计算图像的正确宽度，并将该宽度作为max-width 应用到图像的容器元素上。很简单，但我希望能够在没有 javascript 的情况下完成。

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

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

【问题讨论】：

我很难理解为什么max-height: 不起作用。您能否提供演示该问题的示例 html + CSS + 图像？

不起作用，请检查这个小提琴：jsfiddle.net/Z9yFJ/4。你知道，老实说，我不记得我为什么需要这个。

【参考方案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/

【讨论】：

只要图像比容器高就可以很好地工作。谢谢。

这种方法最好，但我认为最好在.container上指定'max-width'。并将“响应”类添加到 htm 中的容器 div ()。这样它就不会扩展超过明确设置的高度，但它仍然会在该尺寸以下做出响应。

@amchugh89 这个神奇的“响应式”课程从何而来？？

【参考方案2】：

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

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

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

它也适用于width 属性。

【参考方案3】：

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

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

【讨论】：

这不仅没有回答 OP 的问题（即“使用 CSS”），内联样式也是一件坏事（tm），因为它将显示逻辑与内容混合在一起。

此外，当涉及到这个布局问题时，内联样式和文档中其他任何地方定义的样式没有区别。