如何在调整大小窗口上计算div背景图像的大小

Question

我有一些问题无法解决。所以我有一个带有背景图像的div。

<div class="a"></div>

我想让这个背景图像的某个点可以点击。我可以通过添加一些div宽度的z索引来实现这一点，并使其可点击，并将其定位为位置：绝对，例如

<div class="b">
<a class="clickablePoint" href="#"></a>
</div>

但是，如果我的背景图像必须是响应的，那么背景大小：100%自动，那么我如何在调整窗口大小时保持这个可点击点。

当调整窗口大小时，可能有一些实时计算背景图像高度的方法吗？或任何其他方法？：(

Answer 1

这里有一个最小可行的解决方案，展示了如何基于全宽(background-size: 100% auto(背景绝对定位元素。

我将元素的font-size设置为1vw(视口宽度的1/100(，然后以em为单位计算其左/顶部位置和宽度/高度大小，这相当于1vw的倍数。

因此，将这个演示大小调整为任何大小都会使盒子保持在猫鼻子周围的同一位置。

body {
background: url('https://i.imgur.com/sVz3YRx.jpg');
background-size: 100% auto;
height: 50vw; /* for stack snippet height */
position: relative;
margin: 0;
}
.nose {
border: 1px solid yellow; /* for demo */
position: absolute;
font-size: 1vw;
top: 27em;
left: 59em;
width: 6em;
height: 5em;
}

<a class="nose"></a>