HTML响应式排版中利用Object-fit属性优化图片容器的适配-html教程-PHP中文网

object-fit: cover没效果主因是容器缺乏明确宽高；必须确保父容器有可计算高度、img设width/height:100%、避免content撑高，并注意cover/contain语义差异及ie兼容方案。

html响应式排版中利用object-fit属性优化图片容器的适配

object-fit 不是“让图片自适应”，而是“让图片在已知尺寸的盒子里怎么填”——没设宽高，它压根不干活。

90% 的失效不是写错了 CSS，而是容器根本没有确定尺寸：

父容器只设了 width: 100% 或 max-width，但 height 是 auto 或未声明 → 浏览器算不出“要填多大的框”，object-fit 直接跳过
在富文本编辑器（如 TinyMCE、Quill）里插入的 <img>，默认被渲染为 inline 元素，其父 <div> 往往只有宽度约束，高度塌陷为 0 <li>图片本身带 <code>width 和 height HTML 属性（如 <img style="max-width:90%" style="max-width:90%">），这些会转成内联样式，可能覆盖你写的 width: 100%; height: 200px
用了 height: auto 或 max-height → 这些都不是“确定高度”，object-fit 需要参与计算的实际像素值或 aspect-ratio

选哪个，取决于业务对“完整性”和“填充性”的容忍度：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

object-fit: cover：等比缩放后裁剪填满。适合封面图、轮播图、卡片头图——允许人脸被切掉半张，但不能留白
object-fit: contain：等比缩放后完整显示。适合证件照、产品主图、图表截图——必须看到全部内容，留白可接受
别用 fill：强制拉伸变形，除非你明确要压扁 logo
scale-down 是安全兜底：当图片可能比容器小（比如用户上传了 50×50 的头像），又不想放大失真时，它会在 none 和 contain 中选更小的那个

固定高度容器（如卡片、Banner）和流式高度容器（如文章正文图）写法不同：

固定高度：必须同时设 width 和 height，且 img 要设 display: block + width: 100% + height: 100%：
```
.card-img { width: 100%; height: 240px; object-fit: cover; display: block; }
```

响应式高度：用 aspect-ratio 替代 height（现代浏览器支持良好）：

.responsive-img {<br>  width: 100%;<br>  aspect-ratio: 16 / 9;<br>  object-fit: cover;<br>}

避免混用 max-width: 100% 和 object-fit：两者逻辑冲突，max-width 是防溢出，object-fit 是控填充，一起用可能引发渲染异常
IE 完全不支持 object-fit，老版 iOS Safari 需加 -webkit-object-fit；fallback 只能用 background-image + background-size: cover/contain，但会丢失 alt 和 SEO