193

私は、私にとって予期しない動作のように見えるものを理解しようとしています。

コンテナ内に最大高さが100％の要素があり、これも最大高さを使用していますが、予期せず、子が親からオーバーフローします。

テストケース： http： //jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

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

ただし、親に明示的な高さが指定されている場合、これは修正されます。

テストケース： http： //jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

最初の例で子供が親の最大の高さを尊重しない理由を誰かが知っていますか？明示的な高さが必要なのはなぜですか？

4

13 に答える 13

292

子のパーセンテージを指定すると、奇妙なことmax-heightに、親の ではなく、親の実際の高さのパーセンテージになります。についても同様です。max-heightmax-width

したがって、親で明示的な高さを指定しない場合、子のmax-height計算元となるベースの高さがないため、 に計算されmax-height、none子が可能な限り高くなるようにします。現在、子に作用する他の唯一の制約max-widthはその親の です。画像自体は幅よりも高さが高いため、全体的にできるだけ大きくしながら縦横比を維持するために、コンテナーの高さを下にオーバーフローさせます。

親の明示的な高さを指定すると、子はその明示的な高さの最大 100% でな​​ければならないことを認識します。これにより、(縦横比を維持しながら) 親の高さに制限することができます。

于 2013-01-10T17:11:21.453 に答える
92 

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;
}

.img1 {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.img2 {
  display: block;
  max-height: inherit;
  max-width: inherit;
}
<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

少し遊んだ。Firefoxの大きな画像では、inheritプロパティ値を使用すると良い結果が得られました。これはあなたを助けますか？

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}
于 2013-01-10T17:47:31.263 に答える
8

ここで解決策を見つけました: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

このトリックは、要素の WIDTH と PADDING-BOTTOM の間に関係があるため可能です。そう：

親：

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

child ( width に関連するすべての css を削除します。つまり、 width:100%):

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }
于 2014-11-21T15:51:43.127 に答える
5

プロパティobject-fitを使用できます

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

ここで提案されているように

Dev.Opera の Chris Mills によるこのプロパティの完全な説明

そして、 CSS-Tricksのさらに優れたもの

でサポートされています

  • クローム 31+
  • サファリ 7.1+
  • Firefox 36 以降
  • オペラ 26+
  • アンドロイド 4.4.4+
  • iOS 8以降

vivaldi と chromium でもサポートされていることを確認しました (ここで驚くことではありません)。

現在、IE ではサポートされていませんが、気にする必要はありません。また、iOS は object-fit をサポートしていますが、object-position はサポートしていません。

于 2015-07-06T09:30:59.587 に答える
3

この質問の重複としてマークされた、最近開かれた質問の解決策を次に示します。<img>タグが親の最大高さを超えていました<div>。

壊れた:フィドル

ワーキング:フィドル

この場合、display:flex2 つの親<div>タグに追加することが答えでした。

于 2018-05-10T20:43:07.787 に答える
2

私がこれに最も近いのはこの例です：

http://jsfiddle.net/YRFJQ/1/

また

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

主な問題は、高さがコンテナの高さのパーセンテージを取ることです。そのため、最大の高さではなく、親コンテナで明示的に設定された高さを探します。

これをある程度回避する唯一の方法は、オーバーフローを非表示にできる上記のフィドルですが、パディングは画像が流入するための可視スペースとして機能するため、代わりに実線の境界線に置き換えることが機能します（その後必要な幅であれば、border-boxを追加して200pxにします）

これがあなたがそれを必要とするものに合うかどうかはわかりませんが、私が得ることができる最高のものです。

于 2013-01-10T17:17:47.710 に答える
2

他の誰かがあなたの問題の背後にある理由を説明できるかもしれませんが、コンテナの高さを指定してから画像の高さを 100% に設定することで解決できます。width画像の が の前に表示されることが重要ですheight。

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>
于 2013-01-10T16:52:33.057 に答える
0

コンテナに高さがありません。

高さを追加: 200px;

コンテナ css に追加すると、キティは中に留まります。

于 2013-01-10T17:22:20.537 に答える