解决CSS图片内容尺寸不一致问题：使用object-fit实现统一显示
在网页开发中，经常会遇到同一批图片原始尺寸、比例不统一的情况，比如商品列表中的商品图、用户头像列表等。如果直接使用固定宽高的CSS限制图片显示，很容易出现图片拉伸变形、内容被裁剪不完整或者留白过多的问题。而object-fit属性就是专门用来解决这类图片尺寸适配问题的CSS属性，能够让我们灵活控制替换元素（如<img>、<video>）的内容如何适应其容器的尺寸。
object-fit属性基础说明
<img>属于替换元素，其显示的内容不受CSS的直接渲染控制，而是由外部资源决定。object-fit属性就是用来指定替换元素的内容应该如何适应其容器的尺寸，它有以下5个可选值：
fill：默认值，内容拉伸填满整个容器，不保持原始比例，可能导致图片变形。
contain：保持内容的原始比例，缩放内容使其完全显示在容器内，可能会在容器内留下空白。
cover：保持内容的原始比例，缩放内容直到完全覆盖容器，超出容器的部分会被裁剪。
none：保持内容的原始尺寸，不缩放，超出容器的部分会被裁剪，不足的部分会留白。
scale-down：内容的尺寸会取
none和contain中较小的那个，效果类似contain但不会放大小于容器尺寸的内容。
实际场景问题复现
假设我们有一个商品列表，需要显示统一尺寸为200px*200px的商品图，但原始图片有的是横向长方形（400px*200px），有的是纵向长方形（200px*400px），还有的是正方形（300px*300px）。如果直接使用以下CSS设置，会出现图片拉伸的问题：
/* 错误的写法，图片会变形 */
.product-img {
width: 200px;
height: 200px;
}此时横向长方形的图片会被纵向压缩，纵向长方形的图片会被横向压缩，显示效果很差。
使用object-fit解决尺寸问题
我们只需要在图片样式中添加object-fit属性，就可以轻松控制图片的显示效果。根据不同的需求选择不同的值：
场景1：需要完整显示图片内容，允许留白
如果需求是必须完整展示图片的所有内容，即使容器有空白也可以接受，那么选择contain值：
.product-img {
width: 200px;
height: 200px;
object-fit: contain;
/* 可选：设置背景色，让留白区域更美观 */
background-color: #f5f5f5;
}此时所有图片都会保持原始比例，完整显示在200px*200px的容器内，横向图片上下留白，纵向图片左右留白，正方形图片刚好填满。
场景2：需要填满容器，允许裁剪多余内容
如果需求是容器必须被图片完全填满，即使裁剪部分图片内容也可以接受，那么选择cover值：
.product-img {
width: 200px;
height: 200px;
object-fit: cover;
}此时所有图片都会保持原始比例，缩放后完全覆盖200px*200px的容器，超出容器的部分会被裁剪，不会出现留白和变形。
场景3：结合object-position调整裁剪位置
使用cover值时，默认的裁剪位置是图片的中心点，如果我们需要调整裁剪的起始位置，可以配合使用object-position属性，它用来指定替换元素的内容在容器中的位置，语法和background-position一致。
比如需要让图片的顶部优先显示，避免裁剪到图片的关键内容（比如商品图的顶部是商品主体）：
.product-img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: top center;
}object-position的值可以是关键词（top、bottom、left、right、center），也可以是具体的像素或百分比，比如object-position: 20% 80%表示内容在容器内水平偏移20%，垂直偏移80%。
兼容性说明
object-fit属性在现代浏览器中支持度很好，包括Chrome、Firefox、Edge、Safari等主流浏览器，IE浏览器完全不支持该属性。如果需要在IE中实现类似效果，可以使用背景图的方式替代<img>标签，通过background-size属性实现类似效果：
/* IE兼容方案 */
.product-img-ie {
width: 200px;
height: 200px;
background-image: url('https://www.ipipp.com/img/demo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}完整示例代码
以下是一个完整的商品列表图片显示示例，使用object-fit: cover实现统一尺寸显示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit图片适配示例</title>
<style>
.product-list {
display: flex;
gap: 20px;
padding: 20px;
}
.product-item {
width: 200px;
text-align: center;
}
.product-img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #eee;
}
.product-name {
margin-top: 10px;
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<div class="product-list">
<div class="product-item">
<img class="product-img" src="https://www.ipipp.com/img/horizontal.jpg" alt="横向长方形商品图">
<p class="product-name">横向长方形图片</p>
</div>
<div class="product-item">
<img class="product-img" src="https://www.ipipp.com/img/vertical.jpg" alt="纵向长方形商品图">
<p class="product-name">纵向长方形图片</p>
</div>
<div class="product-item">
<img class="product-img" src="https://www.ipipp.com/img/square.jpg" alt="正方形商品图">
<p class="product-name">正方形图片</p>
</div>
</div>
</body>
</html>通过上述方法，我们就可以轻松解决不同尺寸图片在固定容器中显示不一致的问题，根据实际需求选择合适的object-fit值，就能实现理想的显示效果。