比例地将元素定位在响应图像上

Question

我们有一个响应式图像，并且有一些元素位于图像的正上方 - 位于图像上方的元素需要保持与图像成比例的完全相同的位置。

例如：http://jsbin.com/juremuqa/1/edit - 我希望猫上的红色圆圈留在眼睛上方。圆圈无需调整大小，无论是方形元素的高度还是宽度，都只需遮住眼睛。图像也应按比例缩放。

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

定位元素最后是文本。

Answer 1

将此添加到Css。

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

试着告诉我

Answer 2

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