图片响应式最佳实践是用max-width: 100% + height: auto保比例，配合srcset/sizes实现带宽优化，object-fit控制容器内显示方式，容器查询适配组件级尺寸变化。
图片宽度设为 100% 但高度不塌陷
直接写
很容易导致图片被拉伸或高度压缩，尤其当父容器没有明确高度时。关键不是只设宽度，而是让
浏览器
保持原始宽高比。
优先用
+
，这样图片不会溢出容器，且比例不变
避免同时设置
和
（除非你明确要裁剪或变形）
如果父容器是 flex 或 grid，注意检查是否设置了
导致子元素被强行撑高
响应式图片：srcset 和 sizes 配合使用
仅靠 CSS 缩放无法解决带宽浪费问题——小屏设备仍会下载大图。必须配合 HTML 的响应式属性。
提供多张不同分辨率的图，单位用
表示像素宽度
告诉浏览器：在什么断点下，这张图“打算占多少视口宽度”，浏览器据此选最匹配的
项
不要省略
，它是所有不支持
的旧浏览器的兜底
object-fit 控制图片在容器内的显示方式
当你把图片放进固定尺寸的容器（比如卡片头像、轮播图区域），
决定它怎么“塞进去”。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
→ 完整显示，留白；适合需要看清全貌的场景
→ 填满容器，可能裁剪；适合封面图、背景图
→ 拉伸填满，无视比例；慎用
必须配合
和
显式设定容器尺寸，否则无效
现代方案：CSS 容器查询（container query）适配内联图片
当图片尺寸需根据其所在组件（而非整个视口）宽度变化时，媒体查询就不管用了。这时要用容器查询。
立即学习
“
前端免费学习笔记（深入）
”；
必须给图片父容器加
容器查询依赖父容器的尺寸，不是
，所以更适合组件化开发
目前 Chrome 105+、Firefox 110+、Safari 16.4+ 支持，IE 不支持，需评估兼容性
实际项目中，最容易被忽略的是
属性的写法——它不是 CSS，而是 HTML 属性，且语法和媒体查询相似但不等价。写错会导致浏览器始终选第一个
项，失去响应意义。
width: 100%max-width: 100%height: autowidthheightalign-items: stretchsrcsetwsizessrcsetsrcsrcsetobject-fitobject-fit: containobject-fit: coverobject-fit: fillwidthheight.card {
container-type: inline-size;
}
.card img {
width: 100%;
height: auto;
}
@container (min-width: 300px) {
.card img {
border-radius: 8px;
}
}
@container (min-width: 600px) {
.card img {
max-height: 200px;
}
}container-type: inline-sizeviewportsizessrcset