Question

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

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

我在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/

Answer 1

尝试设置height:auto，通常，阻止响应的基础是

  width:100%;
  height:auto

Answer 2

更改此功能并且可以正常工作

.responsive-container {  
    height: 0px;
}

到

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

工作实例

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

Answer 3

昨天我遇到了类似的问题，并将this JSFIddle与this technique for CSS aspect ratios的一些灵感放在一起。

看起来你的.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;
}

似乎到目前为止我正在努力。认为它值得分享，即使有点晚了。

Answer 4

您是否尝试添加＆＃39; object-fit＆＃39;图像元素的属性，除了设置它的高度/最大高度，宽度/最大宽度？

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

Firefox中固定宽高比容器中的响应式图像

4 个答案: