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>

以下是小提琴的链接：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位置不能正确缩放。

当主图像调整大小时，使顶部图像保持在适当位置

1 个答案: