如何实现随图片缩放裁切同步的叠加文本？

核心问题分析 #

你当前的文本定位依赖视口单位（vh）和复杂计算，无法匹配图片object-fit: cover+object-position: center bottom的自适应规则，导致窗口缩放时文本偏移。我们可以通过纯CSS调整定位逻辑，结合少量JS适配动态图层，实现文本与图片的绑定。

步骤1：修改文本的CSS定位规则 #

将文本的定位从视口依赖改为基于图片容器的百分比定位，同时用相对单位保证大小随图片缩放：

.text-overlay {
    position: absolute;
    /* 按图片可见区域的百分比定位，示例：底部往上20%、水平居中 */
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    padding: 1.5vw; /* 用vw做内边距，保持比例 */
    background-color: rgba(0, 0, 0, 0.5);
}

.text-overlay h1 {
    font-size: 3vw; /* 用vw做字体大小，跟随视口缩放 */
    margin-bottom: 0.5vw;
}

.text-overlay p {
    font-size: 1.5vw;
}

步骤2：为动态图片层绑定对应文本 #

因为你是通过JS动态添加图片层，需要在创建图片的同时生成对应文本层，确保文本和图片属于同一层级：

// 替换原有的imagePaths，改成包含文本数据的数组
const imageData = [
    {
        path: "https://images.theconversation.com/files/393210/original/file-20210401-13-z6rl6z.jpg?ixlib=rb-1.1.0&rect=0%2C292%2C3008%2C1504&q=45&auto=format&w=1356&h=668&fit=crop",
        title: "Theo Docking",
        desc: "Game Developer"
    },
    {
        path: "images/2_Background.png",
        title: "背景层",
        desc: "夜晚场景"
    },
    // 补充剩余图片的文本数据...
];

// 修改addImageToContainer函数，添加文本层
function addImageToContainer(data) {
    const imageLayer = document.createElement('div');
    imageLayer.classList.add('image-layer');

    const image = document.createElement('img');
    image.classList.add('image');
    image.src = data.path;
    image.alt = 'Layered Image';

    // 创建对应文本层
    const textOverlay = document.createElement('div');
    textOverlay.classList.add('text-overlay');
    textOverlay.innerHTML = `<h1>${data.title}</h1><p>${data.desc}</p>`;

    imageLayer.appendChild(image);
    imageLayer.appendChild(textOverlay);
    imageContainer.appendChild(imageLayer);

    currentObject = imageLayer;
}

// 修改addNewImage函数的调用逻辑
function addNewImage(imageNumber) {
    if (imageNumber < imageData.length) {
        addImageToContainer(imageData[imageNumber]);
        updateExistingImage();
    }
}

步骤3：原理说明 #

1. 百分比定位：文本基于.image-layer（和图片容器尺寸完全一致）做百分比定位，能和object-fit: cover裁剪后的图片可见区域保持相对位置一致，比如left:50%始终对应图片的水平中心。
2. vw单位：vw是视口宽度的1%，和图片cover规则的缩放逻辑匹配，确保文本大小随图片缩放比例同步变化。
3. 层级绑定：每个文本层属于对应图片层，保证滚动切换图片时，文本和图片同步显示/隐藏。

替代方案：用背景图替代img标签 #

如果不想使用img标签，可以直接将图片设为.image-layer的背景，文本定位逻辑完全一致：

.image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    background-size: cover;
    background-position: center bottom;
}

然后在JS中动态设置imageLayer.style.backgroundImage = url(${data.path})``即可。

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