javascript - 当主图像调整大小时，使顶部图像保持在原位

Question

我有一个主图像和主图像顶部的小标注按钮。我试图让标注按钮在屏幕尺寸发生变化时保持原位，而主图像尺寸使用 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>

这是 fiddle 的链接:http://jsfiddle.net/Nem2C/

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

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

Answer 1

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

参见 this 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 位置由于某种原因不能随宽度正确缩放。