如何使用CSS实现多张图片尺寸统一且避免显示变形？

问题核心在于你给图片设置了height: auto，这会让图片保持自身宽高比缩放，导致高度不一致；而object-fit: cover需要元素有明确的固定宽高才能生效，它的作用是控制图片内容如何填充到元素的固定尺寸框内。

修改后的CSS代码 #

.social {
  display: flex;
  gap: 8px; /* 可选：给图片之间加间距，提升美观度 */
}

.items_soc {
  width: 50px;
  height: 50px; /* 替换height:auto为固定高度 */
  object-fit: cover; /* 裁剪图片，填满固定尺寸容器 */
  /* filter: brightness(0%) invert(100%); */
}

对应的HTML代码（无需修改） #

<div class="social">
  <img class="items_soc" src="https://via.placeholder.com/100x150" />
  <img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
  <img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>

效果对比 #

• 当前效果：
  

• 期望效果（修改后可实现）：
  

如果需要图片完整显示不裁剪，可以把object-fit: cover换成object-fit: contain，不过这样图片会在固定尺寸内按比例显示，可能出现留白，可根据需求选择。

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