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

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

答案最终是如此简单，我不敢相信花了这么长时间才发现。如果您将高度移动到图像并给它们一个display: block，它就会按预期工作，并且父div可以完美地调整大小。

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

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