同时动态调整DIV和iframe（内部网站）的大小

Question

我遇到了问题并试图弄明白......

我正在使用jqueryUI库来使用.resizable（），我在iframe中使用google只是一个例子。我正在使用最新版本的jquery。这是前端示例。

<div class=”Panel”>
              <div class=”ResizeDiv”>
                  <div class=”PanelBody”>
                      <div class=”PlaceHolderView”>
                         <iframe src=”www.google.com” > </iframe>
                       </div>
                   </div>
              </div>   
</div>

使用for循环jsp动态添加上面的代码。所以我试图不让所有其他div元素同时调整大小。他们每个人都需要是独一无二的。这是javascript方面。

$(“.ResizeDiv”).resizable({
     resize: function(event, ui) {
..due its code when resizing .ResizeDiv. This is when adding “-webkit-transform:scale(NUMBER)” style inside the iframe (example $(this).children()...css({"-webkit-transform": scale(number)}). So when resizing ResizeDiv, it dynamically get the scale and resize the iframe along with ResizeDiv. 
      }
})

我的目标 - 当动态调整ResizeDiv div的大小时，iframe也应该在其内部调整大小。谷歌浏览器也应该调整大小以适应iframe

问题 - 当我调整ResizeDiv div的大小时，iframe不会与ResizeDiv一起调整大小。我希望iframe（以及它内部的浏览器）与ResizeDiv完全匹配。我正在使用“-webkit-transform：scale（NUMBER）”来调整iframe中浏览器本身的大小，但我无法弄清楚获取比例数的正确计算，因此它与ResizeDiv非常吻合。

我希望这是有道理的。在过去的几天里，我一直试图解决这个问题。请有人能坚持我吗？我非常感谢！

- 这也是一个例子。注意到iframe位于蓝色边框div内。如果我点击并拖动DIV的右下角，iframe和iframe内的网站应该同时放大。虽然我可以让iframe与div一起移动而不是iframe中的网站，这就是为什么我使用“-webkit-transform：scale（NUMBER）”。但我遇到的问题是，当我放大蓝色边框div时，iframe内部的网站不会缩小或放大蓝色div。它会迅速扩大或缩小。