当浏览器高度更改时，内联块父级未调整为子宽度

Question

尝试将图像包装在容器中并使容器始终是子图像的尺寸，但容器的宽度和高度仅在浏览器水平调整大小时调整大小，而不是在调整浏览器大小时调整大小垂直。

我在这里有一个问题演示：http://codepen.io/anon/pen/ksDFm

使用display inline-block将div包裹在图像周围。

如果您加载页面然后调整浏览器高度而不是宽度，则容器宽度不会更改。如果你调整浏览器的宽度，它就像我期望的那样工作。有什么方法可以解决这个问题吗？

Answer 1

please try it

.image-wrap img {
  max-height: 100%;
  width: 100%;
  max-width: 100%; 
  height: auto;
  vertical-align: middle;
}