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

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;
}