子画像の親の名誉幅を作ることができますか？

Question

親要素を子画像の幅に合わせようとしています。

これは読み込み時に機能しますが、ビューポートの高さを変更して画像の高さを強制的に変更すると、親要素は画像の初期サイズを「記憶」し、その幅を維持します。

高さではなく幅で上記を模倣しても問題はありません。ここで

は、行動の映像である：ここでhttp://jmp.sh/8VEOZS8

はcodepenです：http://codepen.io/iamkeir/pen/YWgvdw

html, body { height: 100%; } 
 

 
.wrapper { 
 
    display: inline-block; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/1280x960" /> 
 
</div>

私が知って興味：

1）なぜこれは起こっている

2）修正方法がある場合

ありがとう！

Answer 1

max-widthとmax-heightという属性を画像に設定することで、ラッパーやウィンドウをオーバーフローさせないように修正できます。次に、display: inline-block;をラッパーに設定することができます。代わりに浮動小数点要素の置換に使用されます。見つけ、残念ながらこれは所望の効果を持っていない - 私は

html, body { height: 100%; } 
 

 
.wrapper { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 

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

<div class="wrapper"> 
 
    <img src="http://placehold.it/1280x960" /> 
 
</div>