響應式圖片父寬度不調整大小

Question

我有一排響應圖像設置爲100％高度和自動寬度包裝在具有靈活高度的div中。問題是父div的寬度在瀏覽器調整大小時不能可靠地更改，在chrome和ie中留下空白或重疊。

<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/