0

我有一个主图像和主图像顶部的小标注按钮。我试图让标注按钮在屏幕尺寸发生变化时保持原位，而主图像尺寸用max-width和调整大小background-size: contain，但现在，标注按钮的位置发生变化。

这是CSS：

.main_image
{
   background: red;
   height: 400px;
   background-size: contain;
   position: relative;
   max-width: 100%;
}

.callouts
{
   background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
   height: 70px;
   width: 40px;
   height: 30px;
   position: absolute;
   top: 70px;
   right: 180px;
}

这是HTML：

<div>
   <img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>

这是小提琴的链接：http: //jsfiddle.net/Nem2C/

当您调整图像大小时，标注按钮会改变位置，但我需要它在图像调整大小时保持在原位。

是否也有 jquery 解决方案或 javascript 解决方案？

4

1 回答 1

0

我试图解决这个问题。我没有完成，但我更接近解决方案。

看到这个 jsFiddle。我把图片放在div.callouts里面，div并用百分比值相对于它进行定位。

<div class="image_wrapper">
    <img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
    <div class="callouts"></div>
</div>

.image_wrapper {
    position: relative;
}

.callouts{
    top: 15.5%;
    right: 24.1%;
}

例如，要从顶部计算正确的百分比值，请使用公式(image_height_in_pixels / pixels_from_the_top) * 100。

我现在所拥有的问题是标注 x 位置由于某种原因不能正确地随宽度缩放。

于 2013-08-06T17:24:42.807 回答