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

Posted 2021-04-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将div定位在可变高度图像的特定区域上相关的知识，希望对你有一定的参考价值。

我正在努力将div放在一个可变高度的图像上，我想知道如何最好地处理这种情况。例如，在下面的示例中，我试图将红色方块放在图像中注册的商标符号上：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偏移量。其他人如何处理这项任务？

答案

This can be achieved with CSS and a few changes to your markup

示例中的图像相对于视口的高度进行缩放 - 高度始终为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>

另一答案

昨天回家我发现这个问题其实很简单。

图像的比例是恒定的，叠加层有两个值：x位置和y位置。 x位置只是图像宽度的一部分，y位置是图像高度的一部分。

因此，可以使用两个浮点值{0,1}来表示叠加层的位置：一个用于叠加在x轴上的位置，另一个用于y轴。然后将这些值乘以图像的宽度和高度（分别），以找到叠加层的适当x，y位置。

为了使叠加层始终位于感兴趣的点上（即{0：max-image-x}，{0：max-image-y}），只需要从x中减去叠加div的宽度的一半，y位置计算。

另一答案

这是fiddle，我在发布你问题的结尾后意识到......无论如何，我在这里留下了答案，因为至少它是精确定位的。我认为没有比你已经尝试过的更好的方法了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css">
        html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
        body{line-height:1.5;}
        table{border-collapse:separate;border-spacing:0;}caption, th, td{text-align:left;font-weight:normal;}
        table, td, th{vertical-align:middle;}
        blockquote:before, blockquote:after, q:before, q:after{content:"";}blockquote, q{quotes:"" "";}
        a img{border:none;}

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

        .overlay {
            position: absolute;
            background: red;
            -moz-border-radius:100%;
            -webkit-border-radius:100%;
            border-radius:100%;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var resizeOverlay = function() {
        var l=515,
                t=145,
                $b=$('.background'),
                $o=$('.overlay'),
                o_w=25,
                o_h=25;
        var b_h=$b.height();
        var ratio=$b.width()/2800;
        $o.css({
            left:parseInt(l*ratio,10)+'px',
            top:parseInt(t*ratio-61,10)+'px',
            width:parseInt(o_w*ratio,10)+'px',
            height:parseInt(o_h*ratio,10)+'px'
        });
        console.log('background_height',b_h);
    };

    $(document).ready(resizeOverlay);
    $(window).resize(resizeOverlay);
</script>
<img src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg" class="background">
<div class="overlay"></div>
</body>
</html>

另一答案

多年以后，我意识到将元素定位在图像的特定区域上的最佳方式是使用SVG，将图像添加到SVG，并将SVG元素定位在图像中的感兴趣点上。

This site has an example，其中建筑物的图像堆叠在其上面，以便悬停在地板（例如地板22）上突出显示该地板：

这是相关的标记：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="4.5 0 980.9 545.9" x="0px" y="0px">
<g>
    <image height="546" overflow="visible" transform="matrix(0.9999 0 0 0.9999 4.4815 -0.9215)" width="981" href="https://www.360statestreet.com/wp-content/themes/statestreet360/images/floorplans/bg-floor_plans.jpg"/>
</g>
<g id="Floors">
    <polygon class="floor Floor7" fill="rgba(102,199,198,0.8)" id="Floor7" opacity="0" points="424,309 450,319 449,320 624,385 632,383 663,394 715,376 715,389 665,409 629,398 624,398 449,333 450,332 424,321" values="th"/>
    <polygon class="floor Floor8" fill="rgba(102,199,198,0.8)" id="Floor8" opacity="0" points="424,297 450,307 449,310 624,373 632,372 663,383 715,364 715,376 666,396 629,384 624,385 450,323 450,320 424,310" values="th"/>
    <polygon class="floor Floor9" fill="rgba(102,199,198,0.8)" id="Floor9" opacity="0" points="424,287 450,297 450,299 625,361 633,360 665,371 715,352 715,365 667,382 630,372 624,374 450,311 450,308 424,299" values="th"/>
    <polygon class="floor Floor10" fill="rgba(102,199,198,0.8)" id="Floor10" opacity="0" points="424,275 450,284 450,287 627,349 634,345 668,358 715,340 715,353 668,372 630,359 628,361 450,300 450,296 424,287" values="th"/>
    <polygon class="floor Floor11" fill="rgba(102,199,198,0.8)" id="Floor11" opacity="0" points="424,263 450,271 450,275 627,337 634,334 667,345 715,327 715,340 667,358 635,346 627,349 450,287 450,284 424,275" values="th"/>
    <polygon class="floor Floor12" fill="rgba(102,199,198,0.8)" id="Floor12" opacity="0" points="424,252 450,261 450,264 627,324 635,322 667,332 715,315 715,327 668,346 635,334 627,337 450,276 450,274 424,265" values="th"/>
    <polygon class="floor Floor13" fill="rgba(102,199,198,0.8)" id="Floor13" opacity="0" points="424,240 451,249 451,251 628,310 635,308 668,319 715,301 715,315 668,333 635,322 628,325 450,265 450,263 424,254" values="th"/>
    <polygon class="floor Floor14" fill="rgba(102,199,198,0.8)" id="Floor14" opacity="0" points="424,228 451,237 451,240 628,297 635,296 668,307 715,289 715,302 668,320 634,309 628,310 450,252 450,250 424,241" values="th"/>
    <polygon class="floor Floor15" fill="rgba(102,199,198,0.8)" id="Floor15" opacity="0" points="424,216 451,225 451,227 628,284 634,284 668,295 715,277 715,290 670,307 634,295 628,298 450,240 450,238 424,229" values="th"/>
    <polygon class="floor Floor16" fill="rgba(102,199,198,0.8)" id="Floor16" opacity="0" points="424,203 451,213 451,216 628,272 634,271 668,282 715,26以上是关于将div定位在可变高度图像的特定区域上的主要内容，如果未能解决你的问题，请参考以下文章 
 如何在div中以可变高度垂直居中内容？
 基于内容高度的可变图像高度[重复]
 特定高度的部分的背景图像
 将div向上移动其自身高度的50％
 如何在固定高度的div内垂直居中动态高度的图像？
 将单个 div 对齐到具有可变高度的行中 div 的底部