移除外层容器内边距，解决图像点位计算偏移问题

问题背景 #

在计算图像上点位的精确位置时，发现承载图像的容器存在内边距，经测量：

• 左内边距：16px
• 顶部内边距：16px

这会导致点击图像时生成的标记点位置偏移，需要通过精准获取内边距修正偏移，或者直接消除内边距来解决。

以下是当前界面的代码，以及对应的两种解决方案：

现有代码 #

Script 部分

const img =  `https://raw.githubusercontent.com/lieldvd/mturk/main/15545/frame_0.jpg`
const leftPadding = 16;
const topPadding = 8;
const markLocation = (x: number, y: number) => {
    const mrkr = document.querySelector<HTMLElement>(".marker");
    console.log('marking')
    if (mrkr != null){
        mrkr.style.left = String(x) + '%';
        mrkr.style.top = String(y) + '%';
    }
}

function onClick(event: any){
    // Image container
    var videoContainer = document.getElementsByClassName("videoContainer")[0].getBoundingClientRect();
    const videoContainerWidth = videoContainer.width + leftPadding;
    const videoContainerHeight = videoContainer.height + topPadding;

    const clientX = event.clientX;
    const clientY = event.clientY;

    let clientXPct = 100 * clientX / videoContainerWidth;
    let clientYPct = 100 * clientY / videoContainerHeight;

    markLocation(clientXPct, clientYPct);
}

Main 结构部分

<div class="videoContainer">
    <h1><u>Training Guidelines</u></h1>
    <h1><u>Training Guidelines</u></h1>
    <h1><u>Training Guidelines</u></h1>
    <h2>Welcome to the "Contact Tagging" Training</h2>
    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <img 
        class="videoCanvas"
        src={img} 
        alt='Blank' 
        on:click|preventDefault={(e)=>onClick(e)}
    />
    <span class="marker"></span>
</div>

Style 样式部分

.mainContainer {
    padding-left: 0;
}
main {
    text-align: center;
    padding: 0em;
    max-width: 240px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    main {
        max-width: none;
    }   
}   
.videoContainer{
    /* 允许子元素基于该容器使用绝对定位 */
    position: relative;

    margin: 0;
    padding-left: 0px;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.marker{
    /* 基于.videoContainer定位 */
    position: absolute;
    left: -50%; /* 点击时通过JS更新 */
    top: -50%; /* 点击时通过JS更新 */
    
    /* 将标记点中心对齐点击位置 */
    transform: translate(-50%, -50%);
    
    /* 圆形标记样式 */
    width: 5px;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: red;
}

解决方案一：动态获取精准内边距修正偏移 #

硬编码的内边距值可能和实际渲染不一致，改用getComputedStyle获取容器真实的内边距数值，再修正点击坐标的计算逻辑：

修改后的 Script 代码：

const img =  `https://raw.githubusercontent.com/lieldvd/mturk/main/15545/frame_0.jpg`
const markLocation = (x: number, y: number) => {
    const mrkr = document.querySelector<HTMLElement>(".marker");
    console.log('marking')
    if (mrkr != null){
        mrkr.style.left = String(x) + '%';
        mrkr.style.top = String(y) + '%';
    }
}

function onClick(event: any){
    const videoContainerEl = document.getElementsByClassName("videoContainer")[0];
    // 获取容器真实内边距
    const styles = window.getComputedStyle(videoContainerEl);
    const leftPadding = parseFloat(styles.paddingLeft);
    const topPadding = parseFloat(styles.paddingTop);
    const rightPadding = parseFloat(styles.paddingRight);
    const bottomPadding = parseFloat(styles.paddingBottom);
    
    const videoContainer = videoContainerEl.getBoundingClientRect();
    
    // 计算点击位置相对于图像区域的坐标（扣除容器内边距）
    const clientX = event.clientX - videoContainer.left - leftPadding;
    const clientY = event.clientY - videoContainer.top - topPadding;

    // 转换为图像区域的百分比坐标
    let clientXPct = 100 * clientX / (videoContainer.width - leftPadding - rightPadding);
    let clientYPct = 100 * clientY / (videoContainer.height - topPadding - bottomPadding);

    markLocation(clientXPct, clientYPct);
}

解决方案二：直接消除容器内边距 #

如果不需要容器内边距，直接修改 CSS 移除内边距，并确保图像占满容器：

修改后的 Style 中 .videoContainer 和新增 .videoCanvas 样式：

.videoContainer{
    position: relative;
    margin: 0;
    padding: 0; /* 移除所有内边距 */
    border: 1px solid black;
    width: 100%;
    height: fit-content; /* 自适应内容高度 */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.videoCanvas {
    width: 100%; /* 图像占满容器宽度 */
    height: auto; /* 保持图像比例 */
    display: block; /* 消除图像底部默认间隙 */
}

同时简化 Script 中的 onClick 函数，无需再处理内边距：

function onClick(event: any){
    const videoContainer = document.getElementsByClassName("videoContainer")[0].getBoundingClientRect();
    
    // 计算点击位置相对于容器的百分比
    const clientXPct = 100 * (event.clientX - videoContainer.left) / videoContainer.width;
    const clientYPct = 100 * (event.clientY - videoContainer.top) / videoContainer.height;

    markLocation(clientXPct, clientYPct);
}

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