引言

CSS图片填充原理

img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 默认值，保持图片的宽高比 */
}

图片填充陷阱及解决方案

1. 溢出内容

解决方案：

  • 设置overflow属性为hidden或scroll，以隐藏或提供滚动条来查看溢出的内容。
div.container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 隐藏溢出的内容 */
}

2. 图片失真

解决方案：

  • 使用object-fit属性控制图片的显示方式，例如cover可以覆盖整个容器，但可能会裁剪图片。
img {
  object-fit: cover;
}

3. 性能问题

解决方案：

  • 对图片进行优化，例如使用适当的图片格式、压缩图片文件大小、使用响应式图片等。
<img src="optimized-image.jpg" alt="描述">

4. 不兼容性

不同的浏览器对object-fit属性的支持程度不同，这可能导致在不同浏览器中显示效果不一致。

解决方案：

  • 使用浏览器前缀来确保跨浏览器兼容性。
img {
  -webkit-object-fit: contain; /* 对于旧版Chrome和Safari */
  object-fit: contain;
}

总结