React组件窗口缩放时背景图无法正确适配容器问题如何解决？

你的适配异常主要来自3个错误配置：

1. banner同时设置了固定100vh高度和上下内边距，小屏设备高度不足时背景图会被强制拉伸裁切，且100vw宽度会导致部分浏览器出现横向滚动条
2. 未给详情页的缩略图img标签设置响应式规则，小屏下图片会超出父容器宽度
3. 电影 backdrop 图默认是16:9的宽高比，用固定高度适配不同屏幕会破坏原图比例

修复方案 #

1. 修改banner样式

替换原有.banner的CSS代码：

.banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    /* 用16:9的比例适配官方backdrop图尺寸，替换固定高度 */
    aspect-ratio: 16/9;
    max-height: 90vh;
    /* 移除冗余的padding和100vh、100vw配置 */
}

如果需要背景图在所有尺寸下都完整显示不裁切，可额外将background-size: cover修改为background-size: contain，同时添加background-color: #000适配深色主题。

2. 新增缩略图响应式规则

在CSS中添加如下配置：

.movie_image img {
    display: block;
    max-width: 100%;
    height: auto;
    /* 按需调整，需要铺满容器就用cover，要完整显示就用contain */
    object-fit: cover;
    border-radius: 8px;
}

3. 小屏布局适配（可选）

如果小屏设备下详情内容排版拥挤，可新增媒体查询调整布局：

@media (max-width: 768px) {
    .movie_details {
        flex-direction: column;
        padding: 16px;
    }
    .movie_image {
        margin: 0 auto 24px;
        max-width: 70%;
    }
}

额外优化

建议给useEffect添加依赖项，避免路由跳转同页面不同ID时数据不更新：

useEffect( () => {
    // 原有请求逻辑不变
}, [params.id, history]);

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