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

これを変更すると動作します

.responsive-container {  
    height: 0px;
}

に

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

実施例

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

于 2014-10-02T19:56:38.813 に答える
0

私は昨日同様の問題を抱えていたので、CSS アスペクト比のこのテクニックからインスピレーションを得て、この 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;
}

これまでのところうまくいっているようです。少し遅れたとしても、シェアする価値があると考えました。

于 2015-10-14T17:44:45.017 に答える
0

を設定してみてください height:auto。通常、ブロックをレスポンシブにする基本は

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

高さ/最大高さ、幅/最大幅を設定する以外に、画像要素に「object-fit」プロパティを追加しようとしましたか?

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

于 2017-04-10T10:03:35.580 に答える