使用 aspect-ratio 和 object-fit 可实现响应式图片裁切，通过设置容器宽高比并用 object-fit: cover 裁剪图片，确保图片填充容器且保持比例，常用 padding-bottom 技巧兼容性好。
在响应式设计中，保持图片的宽高比同时进行裁切，常见于头像、卡片图、轮播图等场景。我们可以通过 CSS 的 object-fit 和 aspect-ratio 属性轻松实现这一效果。
使用 aspect-ratio 保持容器宽高比
为图片容器设置固定的宽高比，使其在不同屏幕尺寸下仍保持比例。
aspect-ratio: 16 / 9;这会让容器始终维持 16:9 的比例，即使宽度变化，高度也会自动调整。
用 object-fit 裁切图片
当图片尺寸与容器不匹配时，object-fit 可控制图片如何填充容器：
立即学习“前端免费学习笔记（深入）”；
- object-fit: cover;：图片缩放并居中裁剪，填满容器，保持比例 —— 最常用
- object-fit: contain;：完整显示图片，可能留白
- object-fit: fill;：拉伸填满，可能变形（不推荐）
实际代码示例
以下是一个响应式正方形裁切图片的典型写法：
.container { width: 100%; height: 0; padding-bottom: 100%; /* 1:1 宽高比 */ position: relative; overflow: hidden; }.container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
这种技巧利用 padding-bottom 实现动态宽高比，兼容性好，适合各种响应式布局。
基本上就这些，关键在于容器定比例、图片用 cover 填充，自然实现裁切不失真。
