1

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

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

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

4

4 回答 4

0

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

  width:100%;
  height:auto
于 2014-10-02T19:51:50.373 回答
0

改变这个，它会工作

.responsive-container {  
    height: 0px;
}

至

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

工作示例

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

于 2014-10-02T19:56:38.813 回答
0

昨天我遇到了类似的问题，并将这个 JSFIddle与CSS 纵横比技术的一些灵感放在一起。

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

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

于 2015-10-14T17:44:45.017 回答
0

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

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

于 2017-04-10T10:03:35.580 回答