如何解决React英雄区API加载图片在大屏下的拉伸问题？

你的问题出在图片元素未设置保持宽高比的属性，强制给图片固定高度和100%宽度后，大屏幕下容器宽高比变化，导致图片被拉伸变形。以下是具体修复方案：

1. 修正图片CSS样式 #

将object-fit属性加到图片类.slide上（注意：object-fit仅对图片这类替换元素生效，你之前加在父级div.slideshowSlider上是无效的）：

.slide {
  display: inline-block;
  height: 50vh;
  width: 100%;
  /* 核心属性：保持图片比例，裁剪超出容器的部分 */
  object-fit: cover;
  /* 可选：让图片居中显示，避免裁剪掉关键内容 */
  object-position: center;
}

object-fit常用值说明： #

• cover：优先保持宽高比，填满容器，超出部分裁剪（适合英雄区，保证视觉饱满）
• contain：完整显示图片，容器可能出现空白边（适合需展示完整图片的场景）
• none：保持图片原始尺寸，可能超出容器或留空白

2. 移除无效代码 #

你的img标签里style={{ poster }}是错误写法，poster是图片路径而非CSS属性，直接删除这部分：

{posters.map((poster, index) => (
  <img 
    src={'https://image.tmdb.org/t/p/w500' + poster} 
    className="slide" 
    key={index} 
    // 删掉此行无效代码
    // style={{ poster }}
  /> 
))}

3. 可选：优化父容器样式 #

若希望英雄区高度更灵活，可给.hero-section和.slideshowSlider设置相对高度或最大高度限制，避免极端屏幕下比例失调：

.hero-section {
  width: 100vw;
  min-height: 50vh;
  max-height: 80vh;
}

.slideshowSlider {
  white-space: nowrap;
  transition: ease 1000ms;
  height: 100%; /* 继承父容器高度 */
  width: 100vw;
  /* 删除此处无效的object-fit */
}

修改完成后，图片在任何屏幕尺寸下都会保持原始宽高比，不会出现拉伸变形。

内容的提问来源于stack exchange，提问作者Gavin-walsh