当窗口调整大小时，在图像顶部重新定位和调整可点击项目的大小答案

【问题标题】：Reposition and rescale clickable item on top of image when window resizes当窗口调整大小时，在图像顶部重新定位和调整可点击项目的大小
【发布时间】：2019-11-26 09:25:06
【问题描述】：

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

问题是，如果我使图像可缩放，则代表区域的自定义 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>

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

【问题讨论】：

标签： html css image responsive-design scale

【解决方案1】：

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

假设您的 img 的宽度为 200px，而您的 div 位于 left:40px，一切看起来都很好。
但是当你调整 img 的大小并且它的宽度为 120px 时，你的 div 仍然位于 left:40px ，这使得它没有响应。

你可以通过使用百分比值来解决这个问题（这些是相对于地图容器的宽度和高度，所以你也需要在那里设置你需要的东西）

由于目前看不到您如何设置组件样式或处理大小调整，因此我无法为您提供更深入的答案，但这应该会让您进入正确的方向

【讨论】：