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

时间:2014-04-30 07:26:33

标签: javascript html css css3 responsive-design

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

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

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

定位元素最后是文本。

2 个答案:

答案 0 :(得分:0)

将此添加到Css。

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

试着告诉我

答案 1 :(得分:0)

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