使用 object-fit: cover 可解决图片拉伸变形问题，通过等比缩放填满容器并裁剪溢出部分，保持图片比例。需设置容器宽高，并将图片宽高设为100%，配合 display: block 应用 object-fit: cover。现代浏览器支持良好，IE 不支持时可用 background-size: cover 替代。
图片在网页中被拉伸变形，通常是因为设置了固定的宽高，而图片原始比例与容器不一致。这时可以用 object-fit 属性来控制图片如何适应其容器，从而保持原有比例。
使用 object-fit 保持图片比例
object-fit 是 CSS 中用于定义可替换元素（如 img 或 video）内容如何适应其容器的属性。常用值包括：
- object-fit: cover; — 图片按比例缩放填满容器，超出部分被裁剪，适合轮播图、卡片封面。
- object-fit: contain; — 图片完整显示，保持比例，容器内留白也没关系，适合预览图。
- object-fit: fill; — 拉伸填充容器（默认行为，会导致变形）。
- object-fit: none; — 不缩放，按原尺寸显示，可能溢出容器。
推荐使用 cover 来避免变形同时填满空间。
设置容器并应用 object-fit
确保图片父容器有明确尺寸，并将图片设为块级元素：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
这样图片会等比缩放并覆盖整个容器，不会变形。
兼容性与注意事项
现代浏览器都支持 object-fit，但老版本 IE 不支持。如果需要兼容，可考虑：
- 使用背景图方式：
background-size: cover; - 用伪元素配合背景图实现类似效果
例如用背景图替代 img 标签：
.container {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
基本上就这些。用 object-fit: cover 是解决图片拉伸最直接有效的方法，既保持比例又填满区域。不复杂但容易忽略。
