object-fit: cover是最直接的等比裁剪方案，需容器有明确宽高、img设width/height:100%且overflow:hidden；IE不支持时可用background-size:cover降级，但会丢失语义和SEO。
用 object-fit: cover 是最直接的方案
只要浏览器支持（Chrome 32+、Firefox 36+、Safari 9.1+、Edge 16+），object-fit: cover 就能实现等比缩放 + 居中裁剪，不拉伸、不变形。但它不是“开箱即用”，必须满足三个硬性前提：
- 容器（比如
<div>）必须有明确的width和height（不能是auto或仅靠内容撑开） -
<img>元素需设width: 100%; height: 100%，且不能同时用 HTML 的width/height属性覆盖它 - 容器要加
overflow: hidden（显式声明更稳妥，尤其在 Flex/Grid 中）
示例写法：
<div style="width: 300px; height: 200px; overflow: hidden;"> <img src="photo.jpg" style="width: 100%; height: 100%; object-fit: cover;"> </div>
为什么图片还是被拉伸或没裁剪？常见失效点
绝大多数“用了 object-fit: cover 却没效果”的问题，其实出在容器尺寸不可计算上：
- 父容器是
display: flex且未设flex-shrink: 0或固定尺寸 → 子容器高度塌陷，height: 100%失效 - 容器用了
min-height或max-width而非确定值 →object-fit缺乏裁剪基准 - 图片原始分辨率远小于容器尺寸（如原图 200×150，容器 600×400）→ 浏览器放大导致模糊，看起来像“失真”
- 写了
object-fit: cover但漏了object-position: center→ 默认虽居中，但在某些旧版 Safari 中可能偏移，人脸被切掉
需要兼容 IE？改用 background-image + background-size: cover
IE 完全不支持 object-fit，但 background-size: cover 从 IE9 就已支持。缺点是语义丢失：alt 文本无效、SEO 不友好、无法懒加载。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须用块级元素（如
<div>）承载背景图，<img>标签无法设置背景 - 容器仍需显式
width和height，且推荐加background-position: center - 如果原图太小，会被强制放大模糊；建议源图宽度 ≥ 容器显示宽度 × 2（留出 Retina 屏空间）
示例：
<div style="width: 300px; height: 200px; background: url('photo.jpg') center/cover no-repeat;"></div>
clip-path 不适合常规裁剪，慎用
clip-path: inset() 看似能“精确裁矩形”，但它只是视觉遮罩，图片原始数据仍在 DOM 中，且：
- Safari 对百分比参数支持不稳定（iOS 15.4 前常失效）
- Firefox 需加
-webkit-前缀才能生效 - 调试困难：四个 inset 值（上右下左）得反复试，无法像
object-fit那样自动对齐比例 - 它不解决“等比缩放”问题——若图片本身宽高比和容器不一致，裁出来的仍是变形区域
真正需要像素级控制（如头像裁剪工具），该用 Canvas；静态正方形裁剪，优先走 object-fit 或背景图方案。
