Javascript 使用jQuery按比例缩放元素与背景覆盖

我有一个棘手的问题： 我在我工作的网站上有一个完整的背景。 现在，我想将div附加到图像上的某个位置，并且该div的缩放方式与使用“background size:cover”属性的我的背景图像的缩放方式相同。 在这个例子中，我有一个城市的图片，它覆盖了浏览器窗口，我希望我的div覆盖一个特定的建筑，不管窗口大小如何

我已经设法使div固定在一个位置，但无法正确调整大小。到目前为止我所做的：

var imageWidth=1920，
图像高度=1368，
imageAspectRatio=图像宽度/图像高度，
$window=$（window）；
var热点=[{
“x”：-160，
‘y’：-20，
‘高度’：400，
“宽度”：300
}];
函数appendHotSpots（）{
对于（var i=0；iimageAspectRatio）{
yPos=（yPos/图像高度）*100；
xPos=（xPos/imageWidth）*100；
xSize=（xSize/imageWidth）*1000；
ySize=（ySize/imageHeight）*1000；
}否则{
yPos=（（yPos/（windowAspectRatio/imageAspectRatio））/imageHeight）*100；
xPos=（（xPos/（windowAspectRatio/imageAspectRatio））/imageWidth）*100；
}
$（this.css）({
“页边距顶部”：yPos+“%”，
“左边距”：xPos+“%”，
“宽度”：xSize+“px”，
“高度”：ySize+“px”
});
});
}
附加热点（）；
$（窗口）。调整大小（位置热点）；

我的想法是： 如果（imageWidth/windowWidth）<1，则设置变量比例=（windowWidth/imageWidth）的值，否则设置变量比例（windowHeight/imageHeight） 使用var比例进行变换：比例（比例，比例） 但我没办法让这一切顺利

---

也许你们可以帮我解决…

背景尺寸的解决方案：封面

我试图给你解决方案（或者把它当作一个想法）。您可以查看正在运行的演示。调整窗口大小以查看结果

首先，我不明白你为什么要用

transform

，

top:50%

和

left:50%

作为热点。所以我尝试使用最小用例来解决这个问题，并为方便起见调整了标记和css

此处

rImage

是原始图像的纵横比

 var imageWidth = 1920;
 var imageHeight = 1368;
 var h = {
   x: imageWidth / 2,
   y: imageHeight / 2,
   height: 100,
   width: 50
 };
 var rImage= imageWidth / imageHeight;

在窗口调整处理程序中，计算视口的纵横比

r

。 接下来，技巧是在调整窗口大小时找到图像的尺寸。但是，视口将剪裁图像以保持纵横比。因此，为了计算图像的尺寸，我们需要一些公式

使用

背景尺寸：cover

计算图像尺寸时，使用以下公式

if(actual_image_aspectratio <= viewport_aspectratio)
    image_width = width_of_viewport
    image_height = width_ofviewport / actual_image_aspectratio 

当使用

背景尺寸：cover

时，您可以参考以了解有关图像尺寸计算的更多信息

在获得图像的尺寸后，我们需要绘制从实际图像到新图像尺寸的热点坐标

为了适应视口中的图像，将在图像的顶部和底部/左侧和右侧剪裁图像。因此，在绘制热点时，我们应该考虑这个剪辑图像的大小作为偏移量。

offset_top=(image_height-viewport_height)/2
offset_left=(image_width-viewport_width)/2

将此偏移值添加到每个热点的

x，y

坐标中

var-imageWidth=1920；
var-imageHeight=1368；
var热点=[{
x:100，
y:200，
身高：100，
宽度：50
}, {
x:300，
y:500，
身高：200，
宽度：100
}, {
x:600，
y:600，
身高：150，
宽度：100
}, {
x:900，
y:550，
身高：100，
宽度：25
}];
var aspectRatio=图像宽度/图像高度；
$（窗口）。调整大小（函数（）{
定位热点（）；
});
var positionhospots=函数（）{
$（'.hotspot'）.remove（）；
var wi=0，
hi=0；
var r=$（'#image'）.width（）/$（'#image'）.height（）；
if（aspectRatio好的，所以我试着使用你的原始想法，只在这里和那里修改了一些内容

我发现使用像素值比使用百分比更容易。因此：

$(this).css({
  'margin-top': yPos + 'px',
  'margin-left': xPos + 'px',
  'width': xSize + 'px',
  'height': ySize + 'px'
});

然后，我们所要做的就是检查视口的比例，看看如何修改
div
的属性

if (windowAspectRatio > imageAspectRatio) {
  var ratio = windowWidth / imageWidth;
} else {
  var ratio = windowHeight / imageHeight;
}

xPos = xPos * ratio;
yPos = yPos * ratio;
xSize = xSize * ratio;
ySize = ySize * ratio;

工作示例：

堆栈片段


var imageWidth=1920，
图像高度=1368，
imageAspectRatio=图像宽度/图像高度，
$window=$（window）；
var热点=[{
x:-210，
y:-150，
身高：250，
宽度：120
}, {
x:240，
y:75，
身高：85，
宽度：175
}];
函数appendHotSpots（）{
对于（var i=0；iimageAspectRatio）{
var比率=窗口宽度/图像宽度；
}否则{
var比率=窗口高度/图像高度；
}
xPos=xPos*比率；
yPos=yPos*比率；
xSize=xSize*比率；
ySize=ySize*比率；
$
$(this).css({
  'margin-top': yPos + 'px',
  'margin-left': xPos + 'px',
  'width': xSize + 'px',
  'height': ySize + 'px'
});

if (windowAspectRatio > imageAspectRatio) {
  var ratio = windowWidth / imageWidth;
} else {
  var ratio = windowHeight / imageHeight;
}

xPos = xPos * ratio;
yPos = yPos * ratio;
xSize = xSize * ratio;
ySize = ySize * ratio;

var bgHeight = 1368;
var bgWidth = 1920;
var bgRatio = bgHeight / bgWidth;

var containerHeight = $container.height();
var containerWidth = $container.width();
var containerRatio = containerHeight / containerWidth;

if (containerRatio > bgRatio) {
    //fgHeight = containerHeight
    //fgWidth = containerHeight / bgRatio
    xScale = (containerHeight / bgRatio) / containerWidth
} else {
    //fgHeight = containerWidth / bgRatio
    //fgWidth = containerWidth 
    yScale = (containerWidth * bgRatio) / containerHeight
}

var transform = 'scale(' + xScale + ', ' + yScale + ')';

$hotSpotContainer.css({
    'transform': transform
});

//bgCoverTool Properties
$('.hot-spot').bgCoverTool({
  parent: $('#container'),
  top: '100px',
  left: '100px',
  height: '100px',
  width: '100px'})

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SVG</title>
        <style type="text/css" media="screen">
            body {
                background: #eee;
                margin: 0;
            }
            svg {
                display: block;
                border: 1px solid #ccc;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #fff;
            }
            .face {
                stroke: #000;
                stroke-width: 20px;
                stroke-linecap: round
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
            <circle r="200" class="face" fill="red"/>
            <path fill="none" class="face" transform="translate(-396,-230)" d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076"/>
            <circle id="leftEye" cx="-60" cy="-50" r="20" fill="#00F"/>
            <circle id="rightEye" cx="60" cy="-50" r="20" fill="#00F"/>
        </svg>
        <script type="text/javascript">
            document.getElementById('leftEye').addEventListener('mouseover', function (e) {
                alert('Left Eye');
            });
            document.getElementById('rightEye').addEventListener('mouseover', function (e) {
                alert('Right Eye');
            });
        </script>
    </body>
</html>

<div id="overlayContainer">
  <div id="square">
    <!-- Overlaying elements here -->
  </div>
</div>

#overlayContainer{
  position: absolute; /* Fixed if the background-image is also fixed */
  min-width:  100vw; /* When cover is applied */
  min-height: 100vh; /* When cover is applied */
  max-width:  100vw; /* When contain is applied */
  max-height: 100vh; /* When contain is applied */
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#square{
  position: relative;
  padding-bottom: 100%;
}

/* When placing overlaying elements, make them all absolutely positioned, and work with percentages only */
/* Look at my Fiddles for examples */

var image = new Image()
image.src = $('body').css('background-image').replace(/url\((['"])?(.*?)\1\)/gi,'$2').split(',')[0]

/* When cover is applied, use this: */
$('#overlayContainer').css({'height':100/(image.width/image.height)+'vw','width':100/(image.height/image.width)+'vh'})

/* When contain is applied, use this: */
$('#overlayContainer').css({'height':100*(image.height/image.width)+'vw','width':100*(image.width/image.height)+'vh'})

width:  calc(100vh * (1920 / 1368));
height: calc(100vw * (1368 / 1920));