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

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

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

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

如果加载页面，然后调整浏览器高度而不是宽度，则容器宽度不会改变。如果您调整浏览器宽度的大小，则其效果将与我期望的一样。有任何解决这个问题的方法吗？

最佳答案

please try it

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