CSS scale实现Ken Burns动画时英雄图黑边、对齐异常问题

• 尺寸硬编码不匹配：可见的.parallax-mirror容器高度被硬编码为972px，但内部图片高度固定为810px，动画执行到scale(1)状态时图片总高度小于容器高度，下方自然露出黑色背景留白。同时容器和图片宽度都被固定为1440px，未做响应式适配，不同视口下图片宽高比与容器宽高比不一致，会出现侧边留白、上下偏移错位的问题。
• 样式优先级冲突：图片标签内联写死了transform: translate3d(0px, 0px, 0px)，内联样式优先级高于外部CSS动画规则，动画执行时缩放变换和内联位移叠加，加上.ken-burn-center类未设置正确的transform-origin，图片上硬编码的top: -131px偏移不会随缩放比例动态调整，直接导致对齐位置异常。
• 冗余节点干扰：手动添加了两个visibility: hidden的.parallax-mirror冗余节点，节点上同样带有ken-burn-center类名，会被CSS选择器命中执行动画，干扰可见区域的位置计算逻辑，加剧位置偏移问题。

1. 修正CSS逻辑 #

替换原有Ken Burns动画相关样式，通过object-fit保证图片始终填满容器，避免留白：

@keyframes ken-burn-in {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.ken-burn-center {
    overflow: hidden;
}
.ken-burn-center > img {
    animation: ken-burn-in 10s ease-out forwards;
    /* 以中心为缩放原点，保证对齐一致 */
    transform-origin: center center;
    transform: scale(1.2);
    /* 强制图片铺满容器，自动裁剪多余部分，无留白 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    max-width: none;
}

2. 调整TSX结构 #

• 删除前两个手动添加的、visibility: hidden的冗余.parallax-mirror节点，这类节点是原主题parallax插件运行时动态生成的，手动硬编码会造成逻辑冲突。
• 去掉可见.parallax-mirror容器上硬编码的固定像素宽高、top偏移，去掉内部img标签上硬编码的固定宽高、top/left偏移、内联transform属性，将容器尺寸改为覆盖视口的响应式尺寸，修正后的容器代码如下：

<div
    className="parallax-mirror ken-burn-center"
    data-source-id="section_5ZtkF"
    style={{
        visibility: 'visible',
        zIndex: -100,
        position: 'fixed',
        top: 0,
        left: 0,
        overflow: 'hidden',
        transform: 'translate3d(0px, 0px, 0px)',
        height: '100vh',
        width: '100vw',
    }}
>
    <img
        className="parallax-slider"
        src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/hd-1.jpg"
        alt="Hero area background"
    />
</div>

• 如果需要保留原主题的视差滚动效果，不要手动编写.parallax-mirror节点，直接在section标签上按原主题规则初始化parallax插件即可，插件会自动计算正确的偏移量、生成对应镜像节点，不会出现位置错乱。

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