响应图像父宽度不调整大小

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/