入れ子になったdivのサイズに合わせてオーバーサイズのイメージを取得しようとしています。私は最大幅や最大高を設定することを推奨するスタック質問のほとんどを見ていますが、それは私の状況ではうまくいかないのです。私のコードを参照してください。ネストされたdivに適合するCSSイメージサイズ
#parent2 {
height: 100%;
width: 100%;
}
#parent {
height: 25%;
width: 50%;
}
#parent img {
max-height: 100%;
}<div id="parent2">
<div id="parent">
<img src="http://lorempixel.com/1000/1000">
</div>
</div>はあなたがmax-widthないmax-heightを使用する必要がありますbackground-size: cover;代わりのmax-height: 100%;
を試してみてください。ここで
は実施例である：ここでは
#parent2 {
height: 100%;
width: 100%;
}
#parent {
height: 25%;
width: 50%;
}
#parent img {
max-width: 100%;
}<div id="parent2">
<div id="parent">
<img src="http://lorempixel.com/1000/1000">
</div>
</div>はあなたのjsfiddleにフォークです：
あなたが使用することもでき https://jsfiddle.net/358vt90e/
：
#parent img {
width: inherit;
}
私はあなたのために異なるケースの束を追加しました。オブジェクトフィットはブラウザのサポートがかなり悪いことに気をつけてください。もしあなたがそれを使いたいのであれば、ポリフィルが必要です。
#parent2 {
height: 100vh;
width: 100%;
}
#parent {
height: 25%;
width: 50%;
}
#parent img {
/* uncomment code below if you want image to respond to parent height */
/*
width: auto;
height: 100%;
*/
/* uncomment code below if you want image to respond to parent width */
/*
width: 100%;
height: auto;
*/
/* uncomment code below if you want image to respond to parent height and width */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}<div id="parent2">
<div id="parent">
<img src="http://lorempixel.com/1000/1000">
</div>
</div>使用
最大幅：100％。
#parent2 {
height: 100%;
width: 100%;
}
#parent img {
max-width:100%;
}<div id="parent2">
<div id="parent">
<img src="http://lorempixel.com/1000/1000">
</div>
</div>用途：
#parent img {
width: inherit;
}
あなたは答えをチェックしましたか？ – Dekel