使用 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 可控制图片如何填充容器：
立即学习“前端免费学习笔记（深入）”；
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 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 填充，自然实现裁切不失真。
以上就是css响应式图片裁切保持宽高比的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1011751.html
微信扫一扫 
支付宝扫一扫 
