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

Question

我正在努力将div放在一个可变高度的图像上,我想知道如何最好地处理这种情况.例如,在下面的例子中,我试图将红色方块放在图像中的注册商标符号上:小提琴.

我的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和标记的一些更改来实现

示例中的图像相对于视口的高度进行缩放 - 高度始终为高度100%,浏览器动态计算宽度以保持纵横比.

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

需要进行以下修改:

• 换行.background并.overlay在容器中(#container在本例中称为)
• #container使用以下属性进行设置:
  • height: 100vh; - 这将使其填充整个视口高度
  • 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%; - 为了确保以与示例类似的方式调整大小,它将填充视口的整个高度.宽度将相对于此缩放
• .overlay使用以下属性进行设置:
  • background: red; - 从你的榜样中结束
  • height: 6vh; - 当图像相对于视口高度缩放时,这将确保叠加以相同的速率缩放
  • left: 18.3%; - 将叠加层定位在已注册符号上方的指定区域
  • position: absolute; - 将叠加层相对于容器定位
  • top: 29%; - 将叠加层定位在已注册符号上方的指定区域
  • width: 6vh; - 当图像相对于视口高度缩放时,这将确保叠加以相同的速率缩放

$(".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小提琴 - 更改结果窗口高度,叠加层应相应地重新定位.