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 s＆＃39; height将与初始加载时保持一致。如果您尝试在开发人员工具中对此进行调试，请在触摸＆＃34; .image-wrap或img上的.image-wrap，img会将其宽度更改为.image-wrap的<...} < / p>

知道如何让img跟随{{1}}？

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
}

Answer 2

如果要更改图像的高度，则需要更改包装器的行为。

#wrap {

}
#image-wrap {
   width: auto;
   border: 2px solid red; // for illustration
   display: inline-block;
}
img {
    display: block;
    height: 300px;
}

在此代码中，img将定义其父级的宽度和高度。主image-wrap div的显示已更改为inline-block。

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

父元素不遵循子img维度

2 个答案: