object-fit:contain单张图片无法填满容器，存在上下留白求助

解决方案 #

object-fit: contain的特性是严格保持图片原始宽高比，当图片宽高比与容器的1:1比例不一致时，必然会出现留白区域。要在不裁剪图片、保留等比缩放的前提下消除视觉空白，最优方案是给图片添加与容器背景色一致的背景色，让留白区域与容器背景融为一体。

修改后的CSS代码：

.tnails {
  height: 180px;
  width: 180px;
  border-radius: 5px;
  border: 1px solid #ddd;
  object-fit: contain;
  /* 替换为你的容器实际背景色，示例为白色 */
  background-color: #ffffff;
}

如果你的容器背景不是白色，只需将background-color的值调整为对应颜色即可。这种方法既保留了图片的完整显示和等比缩放，又解决了留白的视觉问题。

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