レスポンスイメージの親の幅がリサイズされない

Question

私は、レスポンシブイメージの行を100％の高さに設定し、自動幅をdivに柔軟な高さでラップします。問題は親divの幅がブラウザのサイズ変更で確実に変化せず、クロムにギャップまたはオーバーラップが残っていることです。

<div><img></div> 
<div><img></div> 

div { 
    display: inline-block; 
    height: 30vh; 
    background-color: #f3f; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

https://jsfiddle.net/kyucun6b/1/

人々は間違いなく私はおそらくそれを心配しないだろうそれ以外の場合は、ブラウザのサイズを変更されますので、これは私のポートフォリオのためです。ありがとう。

Answer 1

最後の答えはとてもシンプルなので、私はそれが発見するのがずっとかかったとは思えません。高さを画像に移動して表示：ブロックを与えると、それは必要に応じて機能し、親divは完全にサイズ変更されます。

div { 
    display: inline-block; 
    background-color: #f3f; 
} 
img { 
    height: 30vh; 
    display: block; 
    width: auto; 
} 

https://jsfiddle.net/kyucun6b/5/