Question

我正在使用html / jsp / javascript显示一个静态图像。我试图通过使用绝对和相对标签在静态图像上固定标记。

<div style="position: relative; left: 0; top: 0;">
<img src="a.jpg" style="position: relative; top: 0; left: 0;"/>
<img src="b.jpg" style="position: absolute; top: 25px; left: 25px;"/>
</div>

问题是当我缩放图像时，标记在屏幕上保持相同的25px，25px。如何锁定图像上的标记，以便即使在缩放或移动图像滚动条后，标记也应随图像一起自动移动。

使用上面的代码，显示标记被锁定在屏幕上，而不是静态图像上。

Answer 1

如果您只是滚动或缩放图像本身，则标记不受影响并保持不变。相反，请尝试更改包含两个图像的整个div元素。

例如，如果您执行了类似的操作：

<div style="position: relative; overflow: auto; width: 100; height: 100;">
  <!-- both images here -->
</div>

包含div将获得滚动条，可以移动两个图像，使它们保持对齐。（这仅在div小于主图像时生效，否则不需要滚动条。）

对于缩放/缩放：这取决于你是如何做的。如果您正在使用浏览器的缩放功能，它无论如何都应该有效。如果您将一些CSS应用于图像，那么将该CSS应用于div应该可以解决问题。如果您使用javascript调整图像大小，则可能需要进行一些计算以确定标记的新位置。

如何在html java页面中固定静态图像上的标记

1 个答案: