当调整窗口大小时如何计算div背景图片的尺寸

Question

我有一些问题无法解决。因此，我有一个带有背景图片的 div。

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

我希望能够使这个背景图片的某些地方可点击。可以通过为某个div添加z-index属性并将其定位到绝对位置来实现此目的。

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

当我的背景图片必须是响应式的时，我怎样才能保持这个可点击点在调整窗口大小时保持不变呢？background-size:100% auto。

也许有一些方法可以实时计算调整窗口大小时的背景图高度？或者其他方法？:(

- user3348410

---

你能在JavaScript中使用<canvas>吗？ - clabe45

有示例怎么做？ - user3348410

好的，但是如果在某个分辨率上 clickablePoint 的 left 值为 20%，top 值为 60%，背景图片是什么，那在另一个分辨率上会怎样？ - user3348410

相同的百分比。这不是你想要的吗？ - clabe45

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>

- Jon Uleis