Javascript 在响应图像上按比例定位元素

我们有一个反应灵敏的图像，并且有一些元素绝对位于图像上方-位于图像上方的元素需要保持在与图像成比例的完全相同的位置

例如：-我希望猫身上的红色圆圈保持在眼睛上方。圆圈不必调整大小，只需覆盖眼睛，无论方形元素的高度或宽度如何。图像也应按比例缩放

可能只是CSS？或者您需要使用JS计算标签位置吗

定位的元素最后将是文本。

将其添加到Css中

    .square .image {
     background: url('http://animalkingdomz00.com/images/chartreux-cat-6.jpg');
     width: 100%;
     height: 100%;
     display: block;
     background-size: 100% 100%;
    }

---

试着告诉我

如果你不需要红点来做任何事情，那么最简单的解决办法就是用透明的背景来代替眼睛，让红色的背景色透过眼睛。否则你就需要在图像定位上下功夫了，现在你的问题是你的高度和宽度都是固定的，这意味着当图像改变大小时，它会以改变高宽比的方式拉伸，这会使你的眼睛百分比失败。如果您希望这样，那么SSS的想法是正确的。

在显示图像时不会保持该比率。保持图像的比例，你的任务就完成了。是的，这是有道理的，但我不想拉伸图像：就像在你的代码中一样。您已将红色圆点指定在百分比位置。因此，如果在px中这是固定的，并且图像尺寸在px中也是固定的，那么你可以得到期望的结果……但是它在任何方面都没有响应？