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

我有一行响应图像设置为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;
}

div{
显示：内联块；
高度：30vh；
背景色：#f3f；
}
img{
身高：100%；
宽度：自动；
}

---

这是我的作品集，所以人们肯定会调整浏览器的大小，否则我可能不会担心。谢谢。

最后的答案很简单，我真不敢相信花了这么长时间才发现。如果将高度移动到图像并为其显示：block，它将根据需要工作，并且父div的大小将完全调整

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

---

它应该如何工作？mb

width:30vh

for

div

Hi Andrey，你注意到我在调整浏览器大小时提到的问题了吗？在chrome中发生的次数最多，总是在ie中，父对象的大小不会调整为子对象的宽度。如果一切顺利，你永远不会看到任何紫色背景。图像在站点中的宽度将是可变的。