设置img宽高的差异：为何按高度适配需配置容器B高度？

我希望让图片根据宽度或高度适配指定容器，外层容器A为固定宽高。按宽度适配时，仅需为img设置width:100%，无需设置容器B的宽度，图片即可适配容器；但按高度适配时，必须同时设置容器B的height:100%和img的height:100%，否则图片会溢出容器。为何不能像设置宽度那样忽略容器B的高度？

代码结构 #

<div className="containerA">
  <div className="containerB">
    <img src={abc}/>
  </div>
</div>

按宽度适配的CSS #

.containerA{
    width: 100px;
    height: 140px;
}

img{
   width:100%
}

按高度适配的CSS #

.containerA{
    width: 100px;
    height: 140px;
}

.containerB{
   height:100%
}

img{
   height:100%
}

解答 #

这是因为CSS中块级元素的宽度和高度默认计算规则完全不同：

• 宽度方向：块级元素（比如containerB这类div）默认宽度为auto，会自动撑满父容器的可用宽度。所以当给img设置width:100%时，img的参考宽度就是containerB的宽度，而containerB已经自动占满containerA的宽度，img自然就适配了containerA的宽度。

• 高度方向：块级元素默认高度为auto，只会根据内部内容的高度撑开，不会自动继承父容器的高度。如果不给containerB设置height:100%，它的高度就是内部img的原始高度（或者img设置height:100%但无有效参考高度时，会使用自身原始高度），此时img的height:100%没有明确的父级高度参考，会按自身原始高度显示，最终溢出containerA。只有给containerB设置height:100%，让它继承containerA的高度，img的height:100%才有了明确参考，才能适配containerA的高度。

简单总结：宽度默认“占满父容器”，高度默认“由内容撑开”，这就是两者的核心差异。

内容的提问来源于stack exchange，提问作者Vergil Chan