javascript - 在可变高度图像的特定区域上定位 div

Question

我正在努力将一个 div 放置在一个可变高度的图像上，我想知道如何最好地处理这种情况。例如，在下面的示例中，我试图将红色方 block 定位在图像中的注册商标符号上:Fiddle .

我的 HTML/CSS 看起来像这样:

<img src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg" class="background">
<div class="overlay"></div>

.background {
  height: 100%;
  position: absolute;
  margin-top: -61px;
}

.overlay {
  position: absolute;
  height: 20px;
  width: 20px;
  background: red;
}

我使用以下 JS 将红色 div 定位在图像上:

var resizeOverlay = function() {
  var windowHeight = $(window).height();

  var left = windowHeight * 1.07;
  var bottom = (windowHeight * .63) + 61;

  $(".overlay").css({
    "left": left,
    "bottom": bottom
  });
};

$(document).ready(resizeOverlay);
$(window).resize(resizeOverlay);

结果并不理想，因为我只是构建了两个线性模型来计算 x 和 y 偏移量。其他人将如何处理这项任务？

Answer 1

这可以通过 CSS 和对标记的一些更改来实现

示例中的图像根据视口(viewport)的高度进行缩放 - 高度始终为 100%，宽度由浏览器即时计算以保持纵横比。

要定位叠加层，需要应用相同的缩放比例。为此，可以添加一个容器，该容器将适合视口(viewport)高度并缩放到图像宽度，然后这将允许叠加层相对于它定位并按图像比例缩放。

需要进行以下修改:

• 将 .background 和 .overlay 包装在容器中(在本例中称为 #container)
• 设置 #container 具有以下属性:
  • height: 100vh; - 这将使它填满整个视口(viewport)高度
  • margin-top: -61px; - 从您的示例中继承
  • position: relative; - 确保 .overlay 相对于此容器定位
  • width: 570vh; - 这将确保容器以与图像相同的速率缩放。这是通过找到现有图像的纵横比来计算的 - 1140 x 200 是纵横比 57 : 10 所以 200(px) * 5.7 = 1140(px) 转换为 100(vh) * 5.7 = 570(vh)
• 设置 .background 具有以下属性:
  • height: 100%; - 为确保它以与您的示例类似的方式调整大小，它将填充视口(viewport)的整个高度。宽度将相对于此缩放
• 设置 .overlay 具有以下属性:
  • background: red; - 从您的示例中继承
  • height: 6vh; - 由于图像是根据视口(viewport)高度缩放的，这将确保叠加层以相同的速率缩放
  • left: 18.3%; - 将叠加层放置在注册符号上方的指定区域
  • position: absolute; - 相对于容器定位叠加层
  • top: 29%; - 将叠加层放置在注册符号上方的指定区域
  • width: 6vh; - 由于图像是根据视口(viewport)高度缩放的，这将确保叠加层以相同的速率缩放

$(".overlay").click(function() {
  alert("Clicked")
});

#container {
  height: 100vh;
  margin-top: -61px;
  position: relative;
  width: 570vh;
}
.background {
  height: 100%;
}
.overlay {
  background: red;
  height: 6vh;
  left: 18.3%;
  position: absolute;
  top: 29%;
  width: 6vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img alt="" class="background" src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg">
  <div class="overlay"></div>
</div>

JS Fiddle - 更改结果窗口高度，叠加层应相应地重新定位。