React 18中react-parallax组件图片缩放比例失调问题求助

你的问题核心在于两点：一是固定高度导致小屏幕下宽高比失衡，二是自定义CSS没有作用到react-parallax实际控制背景图的容器上。以下是具体修复方案：

修复步骤 #

1. 修改ParallaxItem组件，改用宽高比维持容器尺寸 #

移除固定高度，通过padding-top的百分比特性（基于父元素宽度计算）保证容器宽高比，同时直接通过组件的bgImageStyle属性控制背景图缩放规则：

import React from "react";
import { Parallax } from "react-parallax";

const ParallaxItem = ({ imageUrl, strength, aspectRatio = "56.25%" }) => {
  // aspectRatio默认16:9，可根据需求自定义（如"40%"对应2.5:1）
  const containerStyle = {
    width: "100%",
    paddingTop: aspectRatio,
    position: "relative",
  };

  const bgImageStyle = {
    backgroundSize: "cover",
    backgroundPosition: "center center",
  };

  return (
    <div>
      <Parallax
        bgImage={imageUrl}
        strength={strength}
        bgImageStyle={bgImageStyle}
        className="parallax-container"
      >
        <div style={containerStyle}></div>
      </Parallax>
    </div>
  );
};

export default ParallaxItem;

2. 调整组件调用方式（可选） #

如果需要特定宽高比，调用时传递aspectRatio参数即可，无需固定高度：

import React from "react";
import ParallaxItem from "../../UI/Parallax/ParallaxItem";

const MyPageParallax = () => {
  return (
    <ParallaxItem 
      imageUrl={`${process.env.PUBLIC_URL}/assets/images/Airport-service.jpg`} 
      strength={500} 
      aspectRatio="40%" // 自定义宽高比，适配设计需求
    />
  );
};

export default MyPageParallax;

3. 精简CSS样式 #

仅保留必要的容器样式，避免冲突：

.parallax-container {
  width: 100%;
  overflow: hidden; /* 防止视差效果导致图片溢出容器 */
}

额外优化（可选） #

如果需要保证容器有最小高度，避免极端小屏幕下高度过矮，可以修改containerStyle：

const containerStyle = {
  width: "100%",
  minHeight: 300,
  paddingTop: "max(40%, 300px)", // 取宽高比计算值和最小高度的较大值
  position: "relative",
};

内容的提问来源于stack exchange，提问作者K.Z