Question

我正在尝试解决以下问题：

情况：

我有一个包含图像的外部div。此外，它还包括多个内部div。

问题：

我想缩放div内的图像而不缩放/调整外部div的大小。另外，外部div应该提供滚动条（带溢出：滚动或溢出：auto css选项）。并且内部div（像方形或圆形的元素）应该保持其位置。我的意思是：想象一下，图像是由16个场组成的图像。我把一个正方形放入了字段中。 2/2（第2行，第2列）。当我缩放时，我不想让它失去它的位置，因为图像正在调整大小并且方块保持其位置。

这是我的结构：

#divOuter {position：relative;边框：3px纯红色;高度：400像素;宽度：1000像素;溢出：自动; font-size：12px;变换起源：左上角; -o-transform-origin：左上角; -moz-transform-origin：左上角; -webkit-transform-origin：左上角; -ms-transform-origin：左上角;的z-index：1}

<div id="divOuter" >
    <img id="image" width="800" height="400" src="../../Imagefiel.jpg" alt="">
    </img>
    <div id="circleID" title="circle11" style="border: 1px solid black; border-radius:   
    10px; width: 20px; height: 20px; position:absolute;left: 579px; top: 262px; background-
    color: green; z-index:3">
    </div>
</div>

我已经尝试了两件事： - 通过变换/缩放进行缩放它几乎按照希望工作，但外部div也在调整大小，它不应该。我使用了这些命令： $（“＃divTest”）。css（'transform'，'scale（'+ parseFloat（nScale / 100）+'）'）; $（“＃divTest”）。css（'font-size'，nScale）;

增加图像尺寸（宽度/高度）问题：内部div失去了位置，他们走出了田野，他们没有调整大小/移动图像

我真的很感激，如果有人可以帮我解决这个问题。

谢谢，桑切斯

编辑：我可以解决它:)我在外部div中包含了另一个div（位置：relative）并将其缩放。这样，内部元素相对于外部相对div定位。

具有图像的可缩放内部div元素

0 个答案: