javascript - 缩放一个 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/

点击按钮更改图片大小。