object-fit: cover是最常用的选择——它保持宽高比、裁剪多余部分、确保容器被完全填满；若需完整显示则用contain，但会留白；IE不支持时需用background-image或JS降级方案。
想让图片按比例显示又填满容器，别用 width: 100%; height: 100% —— 那会拉伸变形；也别只依赖 object-fit 就完事，IE 不认它，老项目一跑就露馅。
容器有固定宽高时怎么让图片等比填满不拉伸
这是最常踩坑的场景：给 <img> 设了 width: 300px; height: 200px;，结果图被压扁或拉长。
- 必须加
object-fit: cover;或object-fit: contain;，否则浏览器默认按替换元素规则强行拉伸 - 配套设置
width: 100%; height: 100%; display: block;，否则object-fit不生效 - 容器本身要加
overflow: hidden;，不然裁剪部分（尤其是cover模式）可能溢出边框 - 若需控制裁哪一块，加
object-position: center top;或具体偏移值如20% 30%
示例：
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
display: block;
overflow: hidden;
}
父容器宽度自适应时怎么保持图片比例
比如文章正文里的配图，随屏幕变宽变窄，但不能忽胖忽瘦。
- 直接上
width: 100%; height: auto;，这是兼容性最好、语义最清晰的做法 - 务必加
display: block;，否则<img>作为行内元素会在底部留几像素空白 - 如果父容器宽度不确定（比如 flex 子项没设
flex-basis），先确保它能撑开，否则100%没意义 - 想限制最大尺寸？加
max-width: 800px;，同时保留height: auto;
错误写法：width: 100%; height: 100%; → 图片会被强制拉满高度，比例崩坏。
需要全屏/视口级填充时怎么避免模糊和裁错
比如首页大图，要求铺满整个屏幕，且关键内容不能被裁掉。
- 用
width: 100vw; height: 100vh;确保占满视口，但注意vh在移动端可能受地址栏影响 - 优先选
background-image+background-size: cover;，比<img>更稳，尤其对首屏大图 - 背景图路径是相对于 HTML 文件的，不是 CSS 文件，容易 404
- 如果非要用
<img>，必须加object-fit: cover;和object-position精调，否则居中裁剪可能切掉人脸或 logo
示例（背景图方案）：
.hero {
width: 100vw;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: 50% 30%; /* 上移一点，避开顶部干扰 */
background-repeat: no-repeat;
}
IE 兼容场景下怎么安全实现“填满+不拉伸”
只要项目还要求支持 IE11 或更低版本，object-fit 就得当摆设——它在 IE 里完全无效。
- 改用
div+background-image是唯一靠谱路径，CSS 属性全部原生支持 - 如果必须用
<img>（比如 SEO 或可访问性要求），只能 fallback 到原始尺寸：height: auto;，放弃“填满”诉求 - 可以用
@supports not (object-fit: cover)写降级样式，但注意 IE 连@supports都不认，得靠 JS 检测或 UA 判断 - 别指望
max-width+height: auto能解决固定高容器的填满问题——它只管宽度，不管高度是否溢出
真正麻烦的不是写法，而是设计阶段就要确认：这个“填满”是视觉需求，还是交互容器需求。前者用背景图，后者才考虑 <img> + object-fit + 降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
