Html 相对于响应/缩放图像定位元素

我想相对于响应/缩放图像定位html元素，因此，例如，无论图像如何缩放，点始终位于图像上的同一位置，在本例中，我希望无论视口大小，点始终位于她的眼睛上。这可能吗

.container{
宽度：100%；
身高：100%；
}
.img{
背景图像：url（“https://www.esquireme.com/public/images/2019/12/18/Kendall-Jenner-Best-Model-（3） .jpg”）；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
显示：块；
位置：绝对位置；
排名：0；
底部；
0;
左：0；
右：0；
}
多特先生{
位置：绝对位置；
最高：34%；
左：40%；
宽度：10px；
高度：10px；
背景：蓝色；
边界半径：50px；
}

---

我们需要计算出眼睛距离“新”图像边缘的百分比距离。新图像是由CSS封面设置创建的图像。这会切断图像的顶部/底部或侧面，以便留下的内容完全覆盖元素而不失真

由于头部非常接近图像的中心，我们可能可以确定眼睛始终可见，但在这两种情况下，我们看到由封面创建的图像（图像左侧的部分，在黑色矩形中勾勒）与原稿具有不同的纵横比，因此左眼或上眼之一的%距离将发生变化，另一个与原稿相同

所以我们需要做一些算术来计算HTML元素的新的%偏移量应该是多少

请注意，在这个代码段中，.img元素被删除，背景作为.img放在容器中，似乎仅仅为了保存背景并不需要

const originalPercentLeft=40；//相对于原始图像-如问题中所示
常量originalPercentTop=29；//我重新测量，因为我把圆点放在脸上太远了
常数imgW=1000；//对于这个特定的图像-通常会加载img，然后找到它的纵横比
常数imgH=667；
函数设置（）{
设percentLeft=原始percentLeft；
设percentTop=原始percentTop；
const container=document.querySelector（'.container'）；
const containerW=container.offsetWidth；
const container=container.offsetHeight；
常数imgAspectRatio=imgW/imgH；
const containerAspectRatio=集装箱工人/集装箱工人；
如果（imGasSpectRatio>ContainerSpectRatio）{//如第一张图片所示
const newImgW=imgH*containerAspectRatio；
百分比左=100*（（imgW*百分比左）/100-（imgW-新imgW）/2）/新imgW；
}
否则{//如第二幅图所示
const newImgH=imgW/containerAspectRatio；
percentTop=100*（（imgH*percentTop）/100-（imgH-newImgH）/2）/newImgH；
}
//现在我们可以定位HTML元素；
const dot=document.querySelector（'.dot'）；
dot.style.left=percentLeft+'%'；
dot.style.top=percentTop+'%'；
}
window.onresize=设置；
设置（）
*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
宽度：100vw；
高度：100vh；
}
.集装箱{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
位置：相对位置；
背景图像：url（“https://www.esquireme.com/public/images/2019/12/18/Kendall-Jenner-Best-Model-（3） .jpg”）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
多特先生{
位置：绝对位置；
宽度：10px；
高度：10px；
背景：蓝色；
边界半径：50px；
}

是否希望HTML元素与图像一起缩放？使用一点Javascript是否也可以接受？如果Javascript是yes@AHaworth的唯一方法，HTML元素不应该缩放为no。是的，它可以做到，但需要比CSS单独管理的算法多一点，因此我们需要JS。基本上是模拟CSS中“cover”的计算。