当 window 调整大小时，重新定位和调整图像顶部的可点击项目

Question

所以我想创建一个顶部有矩形可点击区域的图像。我还需要这些区域有颜色，以便它们可以指示状态。它们也应该是透明的，这样你就可以看到它后面的图像上有什么。这一切都很好，但现在我也想让它响应。

问题是，如果我使图像可缩放，代表区域的自定义 div 会保持在原位，不会改变大小。

<div class="map-container">
    <img class="image1" src="SOME_IMAGE" >

    <div class="visibleItem" *ngFor="let item of items"
        /*The default positions for 100% scaling are saved in a document*/
        [ngStyle]="{
        'left': item.posX + 'px',
        'top': item.posY + 'px',
        'width': item.width + 'px',
        'height': item.height + 'px'
        }"
        /*The code below basically changes the background color of the partly transparent item*/
        [class.served]="item.served === true" 

        (click)="doSomething()"
        >
        {{item.name}}
    </div>
</div>

如果能够根据窗口大小调整图像和项目的大小，我将不胜感激。

Answer 1

您正在使用 px 值定位您的 div，因此它没有响应：

假设您的 img 宽度为 200px，您的 div 为 left:40px，一切看起来都很好。
但是当您调整 img 的大小时，它的宽度为 120px，您的 div 仍然位于 left:40px，这使得它成为 non-responsive。

你可以通过用百分比值定位它来解决这个问题（这些是相对于 map-container 的宽度和高度的，所以你也需要在那里设置你需要的东西）

由于目前看不到您如何设置组件样式或处理调整大小，我无法给您更多 in-depth 答案，但这应该会让您进入正确的方向

当 window 调整大小时，重新定位和调整图像顶部的可点击项目

Reposition and rescale clickable item on top of image when window resizes

html

css

image

scale

responsive-design