图片拉伸是因固定宽高未设object-fit，用cover可等比填满（可能裁剪），contain可等比完整显示（留白），fill为默认拉伸失真，none不缩放。
图片被拉伸，通常是因为设置了固定宽高但没控制缩放方式。用 object-fit 可以轻松保持原始比例，不裁剪、不变形。
常见原因是给 <img alt="css新手做首页时图片比例被拉伸怎么办_用object-fit保持图片原始比例" > 或背景图设了 width 和 height（比如 100% 100%），但没告诉浏览器“怎么适配”。浏览器默认拉伸填满，就失真了。
给 <img alt="css新手做首页时图片比例被拉伸怎么办_用object-fit保持图片原始比例" > 元素加这个 CSS 属性，它只对替换元素（如 img、video）有效：
比如首页一个 300×200 的卡片图容器：
立即学习“前端免费学习笔记（深入）”；
<div class="card"> @@##@@ </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）基本上就这些。记住：设了宽高，就记得配 object-fit；要比例，就别用 fill。
以上就是css新手做首页时图片比例被拉伸怎么办_用object-fit保持图片原始比例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
706
收藏
取消收藏
