object-fit: cover 是最直接的等比裁剪方案，需容器有明确宽高或 aspect-ratio，配合 object-position 精确控制裁剪区域。
用 object-fit: cover 实现容器内等比裁剪
这是最直接、语义最清晰的方案：图片保持原始宽高比，缩放后填满容器，超出部分被裁掉。但前提是容器必须有明确的宽高（比如 width: 100%; height: 200px 或通过 aspect-ratio 设置）。
常见错误包括：
– 容器没设 height 或 aspect-ratio，object-fit 就不生效；
– 忘记配 object-position，默认居中可能切掉关键内容；
– 在 Flex/Grid 容器里，父项未设 align-items: stretch，子 img 高度塌陷。
推荐写法：
<div class="card-image"> @@##@@ </div>
.card-image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
用 padding-bottom + 背景图实现固定比例裁剪容器
当你无法直接操作 <img src="photo.jpg" alt="风景"> 标签（比如 CMS 输出受限），或需要更精细控制裁剪位置时，改用 background-image 是可靠替代。核心是利用 padding-bottom 百分比值基于父容器宽度计算的特性，构造出固定宽高比的“空容器”。
注意点：
– padding-bottom 的百分比始终按父容器宽度算，不是高度；
– 必须设 height: 0，否则 padding 不会撑开空间；
– background-size: cover 才能等比填满，contain 会留白；
– Safari 旧版需加 -webkit-background-size: cover。
例如 16:9 容器：
.hero-banner {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 ÷ 16 = 0.5625 */
background-image: url(hero.jpg);
background-position: center;
background-size: cover;
}
用 <picture></picture> + <source></source> 做艺术方向裁剪
<picture></picture> 本身不裁剪，它只是根据 media 查询条件，把**预裁好的不同构图源图**交给浏览器加载。这才是真正意义上的“响应式艺术裁剪”——设计师为手机、平板、桌面各准备一张重点区域不同的图。
最容易失效的写法：
– media 属性写在 <picture></picture> 标签上（浏览器直接忽略）；
– <source></source> 放在 <img> 后面（浏览器跳过全部 <source></source>）；
– 断点重叠且顺序错乱，比如 (max-width: 768px) 写在最前，所有设备都命中它；
– 缺少必需的 <img>，降级失败。
正确顺序（从宽到窄）：
<picture><source media="(min-width: 1200px)" srcset="hero-desktop.jpg"><source media="(min-width: 768px)" srcset="hero-tablet.jpg"><source media="(max-width: 767px)" srcset="hero-mobile.jpg"> @@##@@ </source></source></source></picture>
用 clip-path 做非矩形或局部裁剪
当你要圆形头像、菱形卡片、或者只保留图片中央 60% 区域时，clip-path 是唯一 CSS 方案。它不改变图片文件，只做视觉遮罩。
兼容性要注意：
– IE 完全不支持；
– iOS Safari 9.3+ 开始支持，但老安卓 WebView 可能异常；
– inset() 和 circle() 最稳，path() 字符串写法易出错；
– 别和 overflow: hidden 混用，效果可能冲突。
示例：裁掉上下各 15%、左右各 10%
img.cropped {
clip-path: inset(15% 10%);
}
圆角矩形（等效 border-radius 但可动画）：
img.rounded {
clip-path: round(8px);
}
实际项目里，object-fit 和 <picture></picture> 是主力，前者省事，后者精准；padding-bottom 背景方案适合 CMS 场景；clip-path 留给特殊视觉需求。别指望一个属性解决所有问题——裁剪的本质是内容取舍，技术只是执行工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
