图片响应式最佳实践是用max-width: 100% + height: auto保比例，配合srcset/sizes实现带宽优化，object-fit控制容器内显示方式，容器查询适配组件级尺寸变化。
图片宽度设为 100% 但高度不塌陷
直接写 width: 100% 很容易导致图片被拉伸或高度压缩，尤其当父容器没有明确高度时。关键不是只设宽度，而是让浏览器保持原始宽高比。
- 优先用
max-width: 100%+height: auto，这样图片不会溢出容器，且比例不变 - 避免同时设置
width和height（除非你明确要裁剪或变形） - 如果父容器是 flex 或 grid，注意检查是否设置了
align-items: stretch导致子元素被强行撑高
响应式图片：srcset 和 sizes 配合使用
仅靠 CSS 缩放无法解决带宽浪费问题——小屏设备仍会下载大图。必须配合 HTML 的响应式属性。
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="示例图">
-
srcset提供多张不同分辨率的图，单位用w表示像素宽度 -
sizes告诉浏览器：在什么断点下，这张图“打算占多少视口宽度”，浏览器据此选最匹配的srcset项 - 不要省略
src，它是所有不支持srcset的旧浏览器的兜底
object-fit 控制图片在容器内的显示方式
当你把图片放进固定尺寸的容器（比如卡片头像、轮播图区域），object-fit 决定它怎么“塞进去”。
-
object-fit: contain→ 完整显示，留白；适合需要看清全貌的场景 -
object-fit: cover→ 填满容器，可能裁剪；适合封面图、背景图 -
object-fit: fill→ 拉伸填满，无视比例；慎用 - 必须配合
width和height显式设定容器尺寸，否则无效
现代方案：CSS 容器查询（container query）适配内联图片
当图片尺寸需根据其所在组件（而非整个视口）宽度变化时，媒体查询就不管用了。这时要用容器查询。
立即学习“前端免费学习笔记（深入）”；
.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-size - 容器查询依赖父容器的尺寸，不是
viewport，所以更适合组件化开发 - 目前 Chrome 105+、Firefox 110+、Safari 16.4+ 支持，IE 不支持，需评估兼容性
sizes 属性的写法——它不是 CSS，而是 HTML 属性，且语法和媒体查询相似但不等价。写错会导致浏览器始终选第一个 srcset 项，失去响应意义。 
