html - 使容器高度适合 IE11 中的响应图像

Question

所以我有一个容器 <div>里面有一个响应图像。问题是，容器 div 有宽度限制，我希望它适合响应图像的高度。谁能提出我需要对我的 CSS 进行的更改？

在我下面的代码片段中，您可以看到黑色背景颜色可见(这意味着 <div> 不适合图像的高度。

编辑:

抱歉，我的初始代码段不完整(我删除了旧代码段)。这应该是我遇到的问题。顺便说一下，这个问题只存在于 IE11 中。

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 600px;
  margin-bottom: 8px;
  background-color: black;
}

.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="flex-container">
  <article class="container">
    <img src="http://placehold.it/800x600">
  </article>
</div>

Answer 1

添加vertical-align:top

.container {
  width: 100%;
  max-width: 250px;
  background-color: black;
}

.container img {
  max-width: 100%;
  height: auto;
vertical-align:top;
}

<div class="container">
  <img src="http://placehold.it/350x150">
</div>