缩放div但将其保持在一定的宽度和高度内

Question

所以我试图缩放包含一些注释和背景图像的div，但是当我这样做时，一些注释控件正在重叠。我想做的事情是我的div在某种类型的容器上有宽度和高度约束，所以当我将内容缩放2时，会出现一个垂直/水平滚动条，我的控件不会重叠

这是在包含图像和注释的div缩放之前：

http://i.stack.imgur.com/TXXuZ.png

并且在缩放之后：

http://i.stack.imgur.com/Cr3Mq.png

JQuery方法：

 $.fn.annotateImage.zoomImageIn = function(){
    $('.image-annotate-canvas').css('-webkit-transform', 'scale(1.25)');
  }

 $.fn.annotateImage.zoomImageOut = function(){
     $('.image-annotate-canvas').css('-webkit-transform', 'scale(1)');
  }

HTML：

 <div id="container" class="container">
        <img id="toAnnotate" src="images/exam_scan.jpg" alt="Exam 1" style="width:500px;    height:700px;" />       
 </div>

Answer 1

您可以在容器上设置以下css，以便在内容扩展超过固定大小时添加滚动条。

"overflow:auto" 

JSFIDDLE：http://jsfiddle.net/biz79/sn6wyv49/5/

单击按钮更改图像大小。