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

【问题标题】：Inline block parent not resized to child width when browser height changes浏览器高度更改时，内联块父级未调整为子级宽度
【发布时间】：2014-07-17 13:56:22
【问题描述】：

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

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

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

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

【问题讨论】：

为什么缩短浏览器窗口宽度会改变？
@Paulie_D 因为它包裹的子图像的宽度发生了变化。如果您使浏览器更窄，高度会发生变化的原因相同。
垂直调整浏览器大小时元素宽度不会改变。
@Paulie_D 是否记录在某处？
@Paulie_D 我想你在几周前建议过vh/vw 个单位；在此处分享该答案的链接可能会有所帮助。

标签： html css layout

【解决方案1】：

please try it

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

【讨论】：

这是一个非常低质量的答案。尽管您的代码可能会解决问题，但请解释为什么这会解决问题作者的问题，以便每个人都可以从中学习。