子图像的宽度不会修改其父宽度

Question

我有一个嵌套在一系列<div>标签中的图像。我在height: 100%;和width: auto;中有图像。当我调整浏览器的高度时，图像会更改其大小，但在IE和Edge中父div仍会保持不变（适用于所有其他浏览器）。

这是调整浏览器大小时chrome上的普通渲染：

调整大小时，这是IE中的问题：

或者这样：

我正在尝试根据图像的宽度调整父级的大小。父容器只是不调整大小。这是我的<div>结构：

body,
html {
  margin: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
}

#photo-gallery {
  position: relative;
  height: 100%;
  padding: 100px;
  box-sizing: border-box;
}

.project {
  position: relative;
  display: inline-block;
  height: 100%;
  max-height: 600px;
  border: solid 18px #333;
  box-sizing: border-box;
}

img {
  height: 100%;
  box-sizing: border-box;
}

<div id="photo-gallery">
  <div class="project">
    <img src="img/landscape1.jpg">
  </div>
</div>

Here is my CodePen (open in IE or Edge)

现在，我通过检测图像的宽度并将其提供给直接父对象来使其与JavaScript配合使用，但这确实不理想……我是否缺少某些东西？奇怪的是，如果您调整窗口大小然后重新加载页面，则图像会以正确的大小/比例显示，直到再次调整浏览器大小为止。