[解決済み] 最大高さ: 100%の子が親をオーバーフローする

質問

私には予期せぬ動作に見えるのですが、理解しようとしています。

最大高さ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;
}

最初の例で、子供が親の最大高さを尊重しない理由を知っている人はいますか？なぜ明示的に高さを指定する必要があるのでしょうか？

解決方法を教えてください。

にパーセンテージを指定した場合 max-height の高さではなく、親の実際の高さに対するパーセンテージです。 max-height , 変な話 . についても同様です。 max-width .

つまり、親に高さを明示的に指定しない場合、子の max-height を計算する必要があるため max-height は、次のように計算されます。 none そのため、子供の身長をできるだけ高くすることができます。今子供に作用している他の制約といえば max-width 画像自体は横幅よりも縦幅が大きいため、コンテナの高さを下方にオーバーフローさせ、縦横比を維持しながら全体としてできるだけ大きくなるようにしています。

を使用する場合 する 親に明示的な高さを指定すると、子はその明示的な高さの最大100%でなければならないことを認識します。これにより、親の高さに拘束されることなく（アスペクト比を維持したまま）表示することができます。