图片拉伸是因固定宽高未设object-fit，用cover可等比填满（可能裁剪），contain可等比完整显示（留白），fill为默认拉伸失真，none不缩放。
图片被拉伸，通常是因为设置了固定宽高但没控制缩放方式。用 object-fit 可以轻松保持原始比例，不裁剪、不变形。
为什么图片会拉伸？
常见原因是给 <img> 或背景图设了 width 和 height（比如 100% 100%），但没告诉浏览器“怎么适配”。浏览器默认拉伸填满，就失真了。
用 object-fit 控制图片缩放行为
给 <img> 元素加这个 CSS 属性，它只对替换元素（如 img、video）有效：
- object-fit: cover —— 等比缩放并填满容器，可能裁剪边缘（适合封面图、轮播图）
- object-fit: contain —— 等比缩放并完整显示，留白也坚持比例（适合产品图、图标）
- object-fit: fill —— 默认值，直接拉伸填满（就是你遇到的问题）
- object-fit: none —— 不缩放，按原尺寸显示（超出部分隐藏）
实际写法示例
比如首页一个 300×200 的卡片图容器：
立即学习“前端免费学习笔记（深入）”；
<div class="card"> <img src="hero.jpg" alt="首页主图"> </div>
CSS 这样写：
.card {
width: 300px;
height: 200px;
overflow: hidden; /* 防止 cover 模式下溢出 */
}
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，看需求 */
}注意兼容性和备选方案
object-fit 在现代浏览器支持良好（Chrome 32+、Firefox 36+、Safari 10.1+），IE 完全不支持。如果必须兼容 IE，可用以下替代：
- 用背景图 +
background-size: cover / contain（需改用 div + background-image） - 用 JS 计算宽高比后动态设置 margin/padding 实现“垂直居中+等比”（较重，非必要不推荐）
基本上就这些。记住：设了宽高，就记得配 object-fit；要比例，就别用 fill。
