如何使用CSS实现无需手动设置尺寸的完美正方形div图片容器

额外高度产生的原因 #

img属于行内替换元素，默认vertical-align属性值为baseline。浏览器为了保证行内文本中下行字母（如g、p、y的下沉部分）可以正常展示，会在基线下方预留一定的空白高度，这就是你观察到的额外4px的来源。

无需手动设尺寸、无需JS的解决方法，三种可选： #

• 方法1：将图片设置为块级元素，消除行内元素的对齐特性
  给img添加样式display: block即可
• 方法2：修改图片的垂直对齐规则，避开基线对齐
  给img添加样式vertical-align: bottom（也可设为middle/top，只要不是默认的baseline都可以）
• 方法3：将父容器的字体大小设为0，消除基线预留空白的计算基础
  给.wrapper添加样式font-size: 0，如果容器内有其他文本内容，单独给文本元素重新设置字体大小即可。

完整修改示例（以方法2为例） #

.wrapper{
  background-color: red;
  width: fit-content;
  height: fit-content;
  padding: 30px;
}
.wrapper img {
  vertical-align: bottom;
}

<div class="wrapper">
  <img src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Magnifier-128.png" />
</div>

内容的提问来源于stack exchange，提问作者Petr Marek