代码之家 › 专栏 › 技术社区 › user3348410

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

responsive css html jquery javascript

5

user3348410 · 技术社区 · 8 年前

我有一些问题,我想不出来。所以我有一个带背景图像的div。

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

我想让这个背景图像的某个点可以点击。好吧,我可以通过添加一些div width z-index来实现这一点,并使其可点击,并通过position:absolute来定位,例如,

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

但是,如果我的背景图像必须是响应的,所以背景大小:100%自动,当我调整窗口大小时,我如何保持这个可点击的点在相同的方式上。

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

1 回复 | 直到 8 年前

1

Jon Uleis 8 年前

下面是一个最小可行的解决方案,展示了如何基于全宽度绝对定位元素( background-size: 100% auto )背景。

我正在设置 font-size 元素的 1vw (视区宽度的1/100),然后在 em 单位,相当于 一汽大众 .

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

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>