私は予期しない動作と思われるものを理解しようとしています：
max-heightを使用するコンテナー内にmax-heightが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％でなければならないことを認識します。これにより、（アスペクト比を維持したまま）親の高さに制限できます。
display: flex; flex-direction: column、問題を解決し、必要なスクロールバーを追加しました。
少し遊んだ。firefoxの大きな画像では、inheritプロパティ値を使用して良い結果が得られました。これは役に立ちますか？
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}max:height: 100%高さが固定されていない場合、これは機能しません。jsfiddle.net
dispaly: flex;ます。新しいスレッドを開きました：新しいスレッドを開きました：stackoverflow.com/questions/29732391/… ただし、最悪の場合、Jqueryを使用してimgの実際の幅と高さを取得し、親画像のdivに設定できます。
私はここで解決策を見つけました：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 */
}子（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 */
}プロパティobject-fitを使用できます
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}Dev.OperaのChris Millsによるこのプロパティの完全な説明
そしてCSS-Tricksでさらに良いもの
それはでサポートされています
私はビバルディとクロムがそれをサポートしていることを確認しました（ここでは驚きません）
現在IEではサポートされていませんが、... 気になりますか？また、iOSはオブジェクトフィットをサポートしていますが、オブジェクトの位置はサポートしていませんが、まもなくサポートされます。
max-height：100％/ 100％を使用する代わりに、すべてのスペースを埋める別のアプローチはposition: absolute、top / bottom / left / rightを0に設定して使用します。
つまり、HTMLは次のようになります。
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content">
1, 2, 3
</div>
</div>
</div>.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.scrollable-content {
}Codesandbox-CSS Flex / Grid内のオーバーフローでライブの例を見ることができます
多分誰かがあなたの問題の背後にある理由を説明することができますが、あなたはコンテナの高さを指定してから、画像の高さを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>私がこれに到達できる最も近いのはこの例です：
または
.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%;
}主な問題は、高さがコンテナの高さのパーセンテージを取るため、最大高さではなく、親コンテナで明示的に設定された高さを探していることです。
これをある程度見ることができる唯一の方法は、オーバーフローを非表示にすることができる上のフィドルですが、パディングは画像が流れ込むための可視スペースとして機能するため、代わりに実線の境界線で置き換えることができます（そして必要な幅であれば、ボーダーボックスを追加して200pxにします）
これがあなたがそれを必要とするものに合うかどうかはわかりませんが、私が達成できるように見える最高のものです。
良い解決策は、親で高さを使用せず、ビューポートで子だけで使用することです：
フィドルの例：https : //jsfiddle.net/voan3v13/1/
body, html {
width: 100%;
height: 100%;
}
.parent {
width: 400px;
background: green;
}
.child {
max-height: 40vh;
background: blue;
overflow-y: scroll;
}