面试官: “ 说一下怎么做到前端图片尺寸的响应式适配 ”

前端开发中，图片的尺寸适配是响应式设计的核心部分之一，需要结合图片类型、容器场景、设备特性来选择方案。以下是常见的图片尺寸策略和多窗口适配方法：

一、先明确：前端常用的图片尺寸场景

不同场景下，图片的 "合适尺寸" 差异很大：

场景	建议尺寸范围	示例
图标 / 小图标	24×24 ~ 128×128（2 倍图）	按钮图标、头像缩略图
列表缩略图	300×200 ~ 600×400（2 倍图）	商品列表、文章封面缩略图
详情页主图	800×600 ~ 1920×1080（2 倍图）	商品详情图、Banner 图
背景图	1920×1080 ~ 3840×2160	全屏背景、页面 Banner
移动端适配图	750×1334（2 倍图）、1242×2208（3 倍图）	移动端页面元素图

二、多窗口适配的核心方法

1. 基础适配：max-width: 100%（通用）

最常用的适配方式，让图片不超过容器宽度，自动缩放高度：

img {
  max-width: 100%; /* 图片宽度不超过父容器 */
  height: auto;    /* 高度自动按比例缩放，避免变形 */
}

✅ 适用场景：大部分内联图片、列表图、详情图。

2. 背景图适配：background-size

针对背景图，通过 CSS 属性控制缩放逻辑：

.bg-img {
  width: 100%;
  height: 300px;
  background: url("bg.jpg") center/cover no-repeat; 
  /* 或单独设置： */
  background-size: cover; /* 覆盖容器，可能裁剪 */
  /* background-size: contain; 完整显示，可能留白 */
}

• cover：优先覆盖容器，保持比例（常用全屏背景）；
• contain：优先完整显示，保持比例（常用图标背景）。

3. 响应式图片：srcset + sizes（精准加载）

让浏览器根据设备尺寸 / 像素比，自动选择合适的图片（减少加载体积）：

<img 
  src="img-800.jpg"  <!-- 默认图 -->
  srcset="
    img-400.jpg 400w,  <!-- 400px宽的图 -->
    img-800.jpg 800w,  <!-- 800px宽的图 -->
    img-1200.jpg 1200w <!-- 1200px宽的图 -->
  "
  sizes="(max-width: 600px) 400px, 800px" <!-- 告诉浏览器容器宽度 -->
  alt="响应式图片"
>

✅ 适用场景：对加载性能要求高的大图（如 Banner、详情主图）。

4. 移动端高清图：2 倍图 / 3 倍图

针对 Retina 屏，提供高分辨率图，避免模糊：

<!-- 方法1：srcset 按像素比适配 -->
<img 
  src="img@2x.png" 
  srcset="
    img@1x.png 1x,  <!-- 普通屏 -->
    img@2x.png 2x,  <!-- Retina屏 -->
    img@3x.png 3x   <!-- 超高清屏 -->
  "
  alt="高清图"
>

<!-- 方法2：CSS 背景图（针对图标） -->
.icon {
  background: url("icon@2x.png") no-repeat;
  background-size: 24px 24px; /* 实际显示尺寸是24×24，图片是48×48 */
  width: 24px;
  height: 24px;
}

5. 容器限制：object-fit（控制图片在容器内的显示方式）

当图片宽高比与容器不一致时，避免变形：

.img-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 覆盖容器，裁剪多余部分（常用头像、卡片图） */
  /* object-fit: contain; 完整显示，留白 */
  /* object-fit: fill; 拉伸变形（不推荐） */
}

6. 媒体查询：针对特定窗口尺寸切换图片

强制在不同屏幕下使用不同图片（适合差异较大的场景）：

/* 移动端用小图 */
@media (max-width: 768px) {
  .banner {
    background-image: url("banner-mobile.jpg");
  }
}
/* 桌面端用大图 */
@media (min-width: 769px) {
  .banner {
    background-image: url("banner-desktop.jpg");
  }
}

三、总结适配思路

1. 优先用 max-width: 100% + height: auto：覆盖 80% 的基础场景；
2. 背景图用 background-size: cover/contain；
3. 大图用 srcset + sizes：兼顾性能和清晰度；
4. 固定容器用 object-fit：避免图片变形；
5. 移动端用 2 倍 / 3 倍图：保证高清显示。