17370845950

图片响应式最佳实践是用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 的响应式属性。

@@##@@

• 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 项，失去响应意义。