用 object-fit 和 object-position 可精准控制图片在固定尺寸 div 中的缩放与居中：cover 等比裁剪填满，contain 等比完整显示；需确保父 div 有明确宽高且不塌陷，ie 等旧浏览器需降级为 background-image 方案。
图片在 div 中缩放不居中？用 object-fit 和 object-position
默认情况下，<img alt="html5如何使图片缩小放置在div层中" > 拉伸进固定尺寸的 <div> 会变形，而设 <code>max-width: 100% 又只控制宽度、高度可能溢出或留白。真正可控的方案是把图片当背景处理——但不用 background-image，而是用 <img alt="html5如何使图片缩小放置在div层中" > 自带的 object-fit。
-
object-fit: cover：等比缩放并裁剪，填满容器（最常用） -
object-fit: contain：等比缩放并完整显示，可能有空白 - 配合
object-position: center top可手动调裁剪锚点，默认是center center - 注意：IE 不支持，如需兼容得换
background-image+background-size
div 宽高固定但图片比例不定？别只靠 width 和 height
直接给 <img alt="html5如何使图片缩小放置在div层中" > 设死宽高（比如 width: 200px; height: 150px）会导致拉伸失真。关键不是限制图片本身，而是限制它的“容器盒子”并让图片在里面自适应。
- 给父
<div> 设 <code>width、height和overflow: hidden（防裁剪溢出） -
<img alt="html5如何使图片缩小放置在div层中" >设width: 100%; height: 100%+object-fit: cover - 避免给
<img alt="html5如何使图片缩小放置在div层中" >设max-width或max-height单独使用，它和height: 100%冲突 - 如果父 div 是 flex 容器，记得确认子项没被
align-items或justify-content干扰布局 - 优先用
display: block或display: flex布局，避免浮动 - 绝对定位的父 div 必须显式设
width和height，不能依赖内容撑开 - 媒体查询里改的是父 div 尺寸，不是图片尺寸；图片只需保持
width: 100%; height: 100% - 用浏览器开发者工具检查 computed height，若为
0px，说明父容器没高度，先修这个 - HTML 里用空
<div class="img-bg" style="background-image: url(...)"> <li>CSS 中设 <code>background-size: cover/contain，background-position: center - 无法设置
alt文本，SEO 和屏幕阅读器支持弱，重要图片慎用 - 如果必须保留
<img alt="html5如何使图片缩小放置在div层中" >标签，可用@supports not (object-fit: cover)加降级样式
响应式场景下图片缩放错乱？检查父容器是否脱离文档流
常见于用 position: absolute 或 float 的 div 包裹图片时，父容器高度塌陷，导致 height: 100% 失效，object-fit 就没作用对象了。
想兼容 IE 或老安卓？用 background-image 替代 <img alt="html5如何使图片缩小放置在div层中" >
object-fit 在 IE 和 Android 4.4 以下完全不可用，这时候得退回到背景图方案，但要注意语义性和可访问性损失。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是父容器的高度来源——它必须是明确的、非自动的。很多“图片不缩放”问题，根子不在图片属性，而在上层 div 实际高度是 0 或 auto 且没内容撑开。先查 computed height，再调 object-fit。
