如何让ReactJS渐进式Web应用的Banner图适配移动端与桌面端？

你的问题核心是桌面端设置固定高度后，图片因比例不匹配被挤压。下面是两种实用的解决思路，能让Banner在移动端和桌面端都保持美观：

方案一：容器约束+比例裁剪（推荐） #

通过给容器设置固定高度，再用object-fit属性让图片保持比例填充容器，不会变形：

.banner-container {
  padding: 20px;
  margin-top: 45px;
  /* 桌面端限制容器最大宽度，避免图片过宽 */
  max-width: 1200px;
  margin-inline: auto;
}

.banner-img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .banner-container {
    margin-top: 200px;
    /* 桌面端给容器固定高度 */
    height: 300px;
    overflow: hidden;
  }

  .banner-img {
    width: 100%;
    height: 100%;
    /* 保持图片比例，裁剪超出部分，完全填充容器 */
    object-fit: cover;
    /* 若不想裁剪，可替换为contain（会留空白）或scale-down */
  }
}

关键说明： #

• object-fit: cover是核心：它会让图片按原比例缩放，刚好填满容器，超出的部分自动裁剪，既保证容器被填满，又不会让图片变形。
• 容器加max-width和水平居中，避免桌面端图片撑满整个屏幕，视觉更协调。

方案二：按比例缩小（无裁剪） #

如果不想裁剪图片，可让图片按原比例缩小到指定高度，同时居中显示：

.banner-container {
  padding: 20px;
  margin-top: 45px;
}

.banner-img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .banner-container {
    margin-top: 200px;
  }

  .banner-img {
    max-height: 300px;
    width: auto;
    display: block;
    margin-inline: auto;
  }
}

这种方式下图片不会变形，但容器可能会有空白区域，适合需要完整展示图片内容的场景。

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