Question

我想做的是：

<div> (parent, sized to img)
    <div> (movable within parent, z-level 1+)
       <img />  (z-level 0)
    </div>
</div>

有了这些限制：

html img需要能够从Javascript更改其src（和大小）。

顶级z级div应该能够从Javascript更改其大小，也可以跟随鼠标（通过javascript）。我想使用相对定位，因此coords符合img尺寸。也许绝对会使用父维度？（与img相同）

外部div就在那里，所以我可以从中读取鼠标点击位置。应该可以更改其大小以跟随img src中的更改。

我有一个涉及相同材料的高分辨率和低分辨率图像的用途。我想用可移动缩放框（带边框的透明div）显示低分辨率图像，然后当用户点击它时调整img对象和外部div的大小并加载高分辨率图像，然后滚动窗口使对应的中心（缩放）斑点在高分辨率图像上。没有实际的缩放，它只是通过滚动高分辨率来实现。

除了缩放框之外我还能正常工作：它会加载高分辨率并在点击时滚动。为了能够将可移动框上的z-index设置为高于img但仍具有可移动框图层，使用与固定div相同的坐标，并且img是问题。盒子需要漂浮在img上方。我没有将图像用作背景，部分原因是我需要在y中拉伸它。

网站所有者认为，如果他将图像压缩成扭曲的宽高比，可能有助于防止他的图像被盗。我计算一个高度并强制img使用它，这使它们看起来更好。不同的图像具有不同的宽高比，这就是为什么我希望Javascript控制缩放框的大小。

Answer 1

使用CSS3中新增的:before和:after伪选择器，您可以在同一个对象上轻松拥有2个额外的图层。

这适用于在同一个对象上应用图层，因为这意味着您不必为了必须浮动并调整原始元素的边距和其他此类麻烦而烦恼。

Answer 2

根据您的上一个要求，我想您想看几种保护图像的方法。 here