html - 相对于响应/缩放图像的位置元素

Question

我想相对于响应/缩放图像定位 html 元素，例如，无论图像如何缩放，一个点始终位于图像上的同一位置，在这个例子中我想无论视口(viewport)大小如何，始终让圆点出现在她的眼睛上。这可能吗？

.container {
  width: 100%;
  height: 100%;
}

.img {
  background-image: url("https://www.esquireme.com/public/images/2019/12/18/Kendall-Jenner-Best-Model-(3).jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  bottom;
  0;
  left: 0;
  right: 0;
}

.dot {
  position: absolute;
  top: 34%;
  left: 40%;
  width: 10px;
  height: 10px;
  background: blue;
  border-radius: 50px;
}

<div class="container">
  <div class="img">
    <div class="dot">
    </div>
  </div>
</div>
</div>

https://jsfiddle.net/3knzrq4w/1/

Answer 1

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

由于头部非常靠近图像的中心，我们可能可以肯定眼睛总是会被看到，但是看看这两个场景，我们看到由封面创建的图像(图像左侧的部分，黑色矩形中的轮廓)与原始纵横比不同，因此眼睛左侧或顶部之一的距离百分比将发生变化，另一个保持原始状态。

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

请注意，在此代码段中，删除了 .img 元素并将背景放入容器中，因为 .img 似乎没有必要仅用于保存背景。

const originalPercentLeft = 40; // relative to the original image - as given in the question
const originalPercentTop = 29; // I remeasured as 34 put the dot too far down the face
const imgW = 1000; // for this particular image - in general would load the img then find its aspect ratio
const imgH = 667;

function setup() {
let percentLeft = originalPercentLeft;
let percentTop = originalPercentTop;

const container = document.querySelector('.container');
const containerW = container.offsetWidth;
const containerH = container.offsetHeight;
const imgAspectRatio = imgW / imgH;
const containerAspectRatio = containerW / containerH;

if (imgAspectRatio > containerAspectRatio ) { //as in the first picture
  const newImgW = imgH * containerAspectRatio;
  percentLeft = 100 * ( (imgW * percentLeft)/100 - (imgW - newImgW)/2 )/newImgW;
}
else { //as in the second picture
  const newImgH = imgW / containerAspectRatio;
  percentTop = 100 * ( (imgH * percentTop)/100 - (imgH - newImgH)/2 )/newImgH;
}
// now we can position the HTML element;
const dot = document.querySelector('.dot');
dot.style.left = percentLeft + '%';
dot.style.top = percentTop + '%';
}
window.onresize = setup;
setup();

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}
.container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background-image: url("https://www.esquireme.com/public/images/2019/12/18/Kendall-Jenner-Best-Model-(3).jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: blue;
  border-radius: 50px;
}

<div class="container">
    <div class="dot">
    </div>
</div>