响应式图片适配求助：不同屏幕尺寸切换显示不同图片

嘿，我来帮你搞定这个需求！先聊聊你当前代码里的小问题：你给.hidden_mobile加了display:none，这会让这个元素彻底隐藏，哪怕设置了背景图也看不到，肯定达不到移动端显示合成图的效果。

下面给你两种可行的实现方案，根据你的习惯选就行：

方案一：用<img>标签实现（更推荐，利于SEO） #

这种方式结构清晰，对搜索引擎友好，也更符合语义化规范。

HTML结构 #

<!-- 桌面端展示的多张图片容器 -->
<div class="desktop-images">
  <img src="桌面图1地址" alt="图片1描述">
  <img src="桌面图2地址" alt="图片2描述">
  <!-- 按需添加更多图片 -->
</div>

<!-- 移动端展示的合成图容器 -->
<div class="mobile-single-image">
  <img src="http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg" alt="移动端合成图">
</div>

CSS样式 #

/* 默认状态：桌面端显示多图，隐藏移动端合成图 */
.mobile-single-image {
  display: none;
}

.desktop-images {
  /* 给多图加个横向布局，间距1rem，可按需调整 */
  display: flex;
  gap: 1rem;
}

.desktop-images img {
  width: 200px;
  height: auto;
}

/* 移动端适配（屏幕宽度≤480px） */
@media screen and (max-width: 480px) {
  /* 隐藏桌面多图 */
  .desktop-images {
    display: none;
  }

  /* 显示移动端合成图 */
  .mobile-single-image {
    display: block;
  }

  /* 让合成图自适应移动端宽度 */
  .mobile-single-image img {
    width: 100%;
    height: auto;
  }
}

方案二：用背景图实现移动端合成图 #

如果你更倾向于用背景图的方式展示移动端合成图，一定要给容器设置宽高，不然背景图没地方显示：

HTML结构 #

<!-- 桌面端展示的多张图片容器 -->
<div class="desktop-images">
  <img src="桌面图1地址" alt="图片1描述">
  <img src="桌面图2地址" alt="图片2描述">
</div>

<!-- 移动端合成图容器（空容器，用背景图填充） -->
<div class="mobile-single-image"></div>

CSS样式 #

/* 默认状态：桌面端显示多图，隐藏移动端容器 */
.mobile-single-image {
  display: none;
}

.desktop-images {
  display: flex;
  gap: 1rem;
}

/* 移动端适配 */
@media screen and (max-width: 480px) {
  .desktop-images {
    display: none;
  }

  .mobile-single-image {
    display: block;
    /* 必须设置宽高，背景图才能显示 */
    width: 100%;
    height: 300px; /* 根据你的合成图尺寸调整合适高度 */
    background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

最后记得把代码里的「桌面图地址」替换成你自己的图片链接，样式也可以根据页面需求灵活调整哦～

内容的提问来源于stack exchange，提问作者Arcencielstudio