javascript - 父元素不遵循子 img 尺寸

Question

如果我们有这样的 HTML 结构:

<div id="wrap">
  <div class="image-wrap">
    <img />
  </div>
  <div class="image-wrap">
    <img />
  </div>
  <div class="image-wrap">
    <img />
  </div>
</div>

然后我们用这个 CSS 声明遵循它:

#wrap {
  height:200px;
}

.image-wrap {
  float: left;
  height: 100%;
}

img {
  height: 100%;
}

在初始加载时，.image-wrap 元素的大小将与 img 的大小完全相同但是在我们使用 JavaScript 像这样操作高度之后:

document.getElementById('wrap').style.height = '100px';

.image-wrap 和 img 将紧随其后，将它们的高度更改为 100px。 img 将根据其自身的自然宽高比更改其 width，但 .image-wrap 的 width 将保持与初始加载时相同。如果您尝试在开发人员工具中对此进行调试，一旦您“触摸”了 .image-wrap 或 img 上的 height， .image-wrap 将改变它的宽度以匹配 img...

知道如何让 .image-wrap 跟随 img 吗？

JSFiddle:https://jsfiddle.net/0aLx2xz7/7/

编辑:在 FF 和 Safari 中不会发生，在 Android 和 Chrome 中会发生

Answer 1

将内联显示设置为图像包装器。我不确定这是某种显示错误还是只是 chrome 有问题但将显示设置为内联可以修复它。实际上，您也可以将显示设置为阻止，它似乎会消失。对我来说看起来像是某种错误，它甚至没有出现在 Safari 上

https://jsfiddle.net/0aLx2xz7/3/

#image-wrap {
    float: left;
    height: 100%;
    display: inline;    
    border: 2px solid red; // for illustration
}