如何在调整大小时将元素大小和位置映射到其他元素大小和位置

Question

所以我运行在尝试使图像上的对象可点击时遇到了问题。我有一个包含 3 个对象的图像，我想 link 到 3 个不同的页面/执行 3 个不同的功能 onclick。

现在，当我调整 window 大小时出现问题。具有以下样式的图像始终显示对象，即使我调整 window 大小并填满整个屏幕也是如此。

img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: calc(100vh - 90px);
}

由于对象非常大，当我调整大小时，比方说移动视图，links 将重叠并且比屏幕本身大。

这是当前的HTML结构，我可以更改它。

<div>
    <img src="img/steintafelAussen.jpg" alt="Kircheneingang" />
    <div class="buttons">
        <button class="btn-1"></button>
        <button class="btn-2"></button>
        <button class="btn-3"></button>
    </div>
</div>

现在我的问题是，是否可以将按钮的大小和位置映射到图像，自动重新缩放，或者我是否需要使用媒体查询来实现？

我正在考虑跟踪某个人的图像的初始比例并将其应用到 links transform: scale();，也许吧？

我可以使用放置在图像上的透明 SVG，有 3 个带有 eventListeners 的对象而不是 links 吗？

使用 JS 很好，因为它是 vue 3 应用程序。

Answer 1

我已经通过在图像上放置相同大小的 SVG 并将 eventListeners 添加到链接的路径来解决问题。导致以下代码：

.wrapper {
    aspect-ratio: 4 / 3;
    position: absolute;
    max-height: calc(100vh - 90px); /*Calc because my header and footer are 40px and 50px otherwise it would be 100vh*/
    margin: auto;
    width: auto;
    top: 40px; /*header is 40px*/
    right: 0;
    bottom: 50px; /*footer is 50px*/
    left: 0;
}
.img,
.overlay-svg {
    position: absolute;
    max-height: 100%;
    margin: auto;
    width: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div class="wrapper">
    <img
        class="img"
        src="/path/to/image"
    />
    <svg
        class="overlay-svg"
        viewBox="0 0 2049 1537"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
           class="btn-svg"
           d="M810 523V495.5L890 479.5H993.5L1090 495.5L1178 523V1311L787 1329.5L799.5 940.5L810 523Z"
        />
        <path
            class="btn-svg"
            d="M1461 672L1808 585L1832 1537H1471.5L1461 672Z"
        />
        <path
            class="btn-svg btn-lamp"
            d="M481 567L517 512L544 567L577 589.5L544 699L506.5 739.5L466 690L451 579L481 567Z"
        />
    </svg>
</div>

如何在调整大小时将元素大小和位置映射到其他元素大小和位置

How can I map Elements size and position to other Elements size and position on resize

html

javascript

css

vuejs3