调整主图像大小时使顶部图像保持原位答案

【问题标题】：Make top image stay in position when main image resizes调整主图像大小时使顶部图像保持原位
【发布时间】：2013-08-06 12:32:08
【问题描述】：

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

【问题讨论】：

您的 callout 保持不变。就在你告诉它的地方。这种“移动”只是由于 主图像 调整大小，因此您不会得到完美的解决方案。您是否尝试过像素而不是百分比？类似top: 38%; left: 31%;。
@RoryO'Kane 太棒了！谢谢.......希望我们可以将其更改为答案，以便我可以投票给您
@RickyAhn 我把评论改成了an answer。

标签： javascript jquery html css

【解决方案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 位置由于某种原因不能正确地随宽度缩放。

【讨论】：