Firefox 中固定纵横比容器中的响应式图像答案

【问题标题】：Responsive Image in fixed aspect ratio container in FirefoxFirefox 中固定纵横比容器中的响应式图像
【发布时间】：2014-11-27 21:25:33
【问题描述】：

我有一个固定纵横比的容器。

我有一个最大宽度和蜡高的图像。图像需要包含在容器的边界内。

我在 Chrome 中工作正常，但在 Firefox 中失败。

.responsive-container {
    width: 100%;
    height: 0px;
    padding-bottom: 60%;
    box-sizing: padding-box;
    border: 3px solid yellow;
}

img {
    max-height: 100%;
    max-width: 100%;
}

这是一个小提琴：http://jsfiddle.net/nqkpszxz/2/

【问题讨论】：

标签： firefox aspect-ratio border-box

【解决方案1】：

尝试设置height:auto, 通常使块响应的基础是

  width:100%;
  height:auto

【讨论】：

编辑了 OP 以澄清：图像需要包含在容器中。在示例小提琴中，图像会随着您的代码扩展超出底部边框。
通常一个元素响应左右边框；你想让它在碰到上下边框时缩小吗？请正确设置小提琴
我以为我做到了？容器的宽度为 100%。

【解决方案2】：

改变它，它会起作用

.responsive-container {  
    height: 0px;
}

到

.responsive-container {  
    height:100%;//values changed
}

工作示例

http://jsfiddle.net/nqkpszxz/4/

【讨论】：

这只会通过使容器更大来为图像留出更多空间。容器的高度不能设置，因为它需要保持原来的纵横比。

【解决方案3】：

我昨天遇到了类似的问题，并从this technique for CSS aspect ratios 获得了一些灵感，整理了this JSFIddle。

看起来你的 .responsive-container 类的纵横比工作得很好，但是 img 上的 max-height 和 max-width 似乎并没有起到作用。这就是我昨天遇到的。

环顾四周后，我开始做一些我通常不会做的事情，并决定尝试内联样式：

<div class="image" style="background-image: url('https://placehold.it/150x350');"></div>

附带以下 CSS：

.image {
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
}

到目前为止，对我来说似乎很有效。认为它值得分享，即使有点晚了。

【讨论】：

【解决方案4】：

除了设置高度/最大高度、宽度/最大宽度之外，您是否尝试将“object-fit”属性添加到图像元素？

https://css-tricks.com/almanac/properties/o/object-fit/

【讨论】：