无法同时实现“完整铺满且不变形”，需按场景选择：cover类裁剪铺满、contain类留白保全、或背景图替代；关键在容器尺寸约束、object-fit/object-position或background-size配合overflow:hidden。
做不到“完整铺满且不变形”——这是个矛盾需求，必须先明确你要的是“填满容器无空白”还是“图片全部可见不裁剪”。object-fit: cover 和 background-size: cover 都会裁剪；object-fit: contain 和 background-size: contain 都会留白。没有万能解，只有按场景选对方案。
用 object-fit: cover 实现视觉上“铺满”，接受合理裁剪
这是卡片、头像、Banner 图最常用的方案：图片等比缩放后完全覆盖容器，超出部分隐藏。关键点不是“铺满”，而是“裁哪、怎么裁”。
- 容器必须设固定宽高（或通过
aspect-ratio约束比例），否则height: 100%无效 -
img必须设width: 100%; height: 100%，否则object-fit不生效 - 用
object-position控制裁剪锚点，比如object-position: top center优先保留顶部内容 - 老浏览器（IE）不支持
object-fit，若需兼容，得回退到绝对定位方案
示例：
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
用 background-size: cover 替代 <img> 标签
当图片只是装饰、不需要语义化或 SEO，背景图方案更轻量，控制粒度也更高。
- 不用操心
img的宽高继承问题，直接在容器上写样式 -
background-position: center是标配，否则容易偏移失焦 -
background-repeat: no-repeat必须显式声明，避免意外平铺 - 移动端要注意
background-attachment: fixed可能触发渲染卡顿或失效
示例：
.hero-banner {
width: 100%;
height: 400px;
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
用 max-width/max-height + object-fit: contain 强制“全部可见”
适合产品图、证件照等不允许裁剪的场景。它不会铺满，但能保证图片完整、居中、等比、不溢出。
- 容器仍需有明确高度（如
height: 300px或aspect-ratio: 4/3） -
img不设width/height，只设max-width: 100%; max-height: 100% -
object-fit: contain在这里起辅助作用，真正起效的是浏览器对max-*的等比缩放逻辑 - 如果想让图片“优先按高度撑满”，可加
min-height: 100%，但要小心小图被拉伸
示例：
.product-img {
max-width: 100%;
max-height: 100%;
min-height: 100%;
object-fit: contain;
}
为什么 width: 100%; height: 100% 单独用一定会变形？
因为这组声明强制拉伸图片原始尺寸，完全无视其固有宽高比。哪怕图片是 4:3，容器是 16:9，浏览器也会把它硬生生“撑开”填满。
- 常见错误：以为加了
no-repeat就能控制缩放——background-repeat只管是否重复，不管缩放 - 真正控制缩放的是
background-size（背景图）或object-fit（内联图） - 不要依赖图片原始尺寸做布局，所有尺寸约束都应落在容器或
img元素自身上 - 响应式下尤其注意：用
vmax、aspect-ratio或媒体查询动态调整容器高，比死写height: 300px更可靠
最易被忽略的一点：无论选哪种方案，容器的 overflow: hidden 往往是默认安全项——cover 类方案靠它藏掉裁剪边，contain 类方案靠它防意外滚动条。别等上线后才发现图片边缘漏出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
