使用 Object-fit: cover 可让图片保持比例并填满容器，结合 padding-bottom 实现固定比例容器，通过绝对定位使图片居中裁剪；兼容性不足时可用 background-size: cover 或 picture 标签配合 srcset 实现响应式与 art-direction，提升自适应显示效果。
在网页设计中，图片的自适应显示是一个常见需求。如何让图片在不同尺寸的容器中保持美观、不拉伸变形，同时又能完整展示内容？css 的 object-fit 属性 是解决这一问题的关键工具之一。配合合理的布局技巧，可以轻松实现响应式图片显示。
理解 object-fit 属性
object-fit 控制可替换元素（如 <img> 或 <video>）的内容如何适应其容器。它有以下几个常用值：
- fill：拉伸图片填满容器，可能变形
- contain：保持比例缩放，完整显示图片，留白填充空白区域
- cover：保持比例缩放，裁剪超出部分，完全覆盖容器
- none：保持原始尺寸，不缩放
- scale-down：类似
none或contain中较小的那个效果
对于大多数自适应场景，object-fit: cover 是最常用的选项，尤其适合头像、卡片封面等需要填满容器又不想变形的情况。
结合容器设置实现响应式布局
要让图片真正“自适应”，除了 object-fit，还需要合理设置容器和图片本身的样式。
立即学习“前端免费学习笔记（深入）”；
示例：创建一个固定比例的图片卡片
<font face="Courier New, Courier, monospace">.image-container { width: 100%; height: 0; padding-bottom: 75%; /* 4:3 比例，高度为宽度的 75% */ position: relative; overflow: hidden; } <p>.image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }</font>
这个技巧利用 padding-bottom 实现等比缩放容器，图片始终居中裁剪显示，适配各种屏幕宽度。
处理不同图片源的兼容性与降级
object-fit 在现代浏览器中支持良好，但在一些旧版本浏览器（如 IE）中不被支持。如果需要兼容，可以考虑以下方案：
- 使用背景图代替
<img>，通过background-size: cover实现类似效果 - 用 javaScript 检测支持性并动态添加类名进行样式调整
- 为关键项目提供备用布局方案
例如用背景图实现相同效果：
<font face="Courier New, Courier, monospace">.image-as-bg { width: 100%; height: 200px; background-image: url('example.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }</font>
虽然牺牲了语义化和 seo 优势，但在某些场景下更可靠。
响应式图片与 art-direction 配合使用
当需要根据不同设备显示不同构图的图片时，可以结合 <picture> 标签与 object-fit 使用。
<font face="Courier New, Courier, monospace"><picture> <source media="(max-width: 768px)" srcset="mobile-img.jpg"> <source media="(min-width: 769px)" srcset="desktop-img.jpg"> <img src="fallback.jpg" style="width:100%; object-fit:cover;"> </picture></font>
这样既能控制图片内容的展示方式，又能根据屏幕尺寸选择最合适的图像资源。
基本上就这些。掌握 object-fit 和容器布局技巧，能大幅提升图片在响应式设计中的表现力，让页面更专业、更稳定。