如何在浏览器缩放时动态定位和缩放 iframe

Question

问题

用户可以选择通过粘贴 iframe 代码或网址来创建 iframe。当窗口重新调整大小时，iframe 需要保持在页面的中间和底部。我已经让 iframe 大部分时间停留在页面的中间和底部。但是当窗口重新调整大小（用户放大（150% 等）或缩小（50% 等））时，iframe 本身在用户放大时变大，当用户缩小时变小。由于我无法定位 iframe 中的内容，因此我一直在尝试找出一种将比例应用于 iframe 的方法，以便它看起来保持相同的大小和相同的位置。当窗口重新调整大小时，我无法动态确定 iframe 的比例。

Javascript

加载事件

                jQuery('#iframe_wrapper iframe').attr('id','iframe');
                jQuery( "#iframe" ).load(function() {
                    jQuery('#adhesion_iframe').css('-webkit-transform', 'scale(1)');
                });

位置

ratio = $('#iframe').width() / ($('#iframe').height() + ($('#close_btn')close.length>0 ? 0 : 20));


 if (window.innerWidth > window.innerHeight) {
                        var width = window.innerWidth / 1.5 / 1.5;
                        $('#iframe_wrapper').css({
                            width: width + "px",
                            height: window.innerWidth / ratio / 1.5 + "px",
                            left: parseInt((window.pageXOffset + window.innerWidth / 2) - (width / 2)) + "px",
                            top: parseInt(window.innerHeight + window.pageYOffset - window.innerWidth / ratio / 1.5 / 1.5) + "px"
                        });

iframe

if($('#iframe').length >0 ){

                    jQuery.fn.center = function(){
                        this.css("position","absolute");
                        this.css("top","60%");
                        this.css("left","50%");
                        this.css("margin-top","-"+(this.height()/2)+"px");
                        this.css("margin-left","-"+(this.width()/2)+"px");
                        return this;}

                    $('#iframe').center();

                $('iframe').css({
                    '-webkit-transform': 'scale('+(document.body.offsetWidth * scale / initial_width )
                });

                }

当页面加载时，初始比例将设置为 1。我正在考虑做这样的事情来动态改变窗口重新大小时的比例 '-webkit-transform': 'scale('+( document.body.offsetWidth * scale / initial_width)。因此，如果缩放级别达到 150%，则比例将类似于 0.something，如果缩放级别达到 50%，则比例可能为 2。诸如此类.....当然我可以对比例进行硬编码，但这仅适用于某些 iframe 尺寸（iframe 宽度和高度由用户动态设置）。因此它可能适用于 300 x 50 的 iframe，但不是 600 x 100 等。

Answer 1

我认为你做得过火了。只需使用 css 将 iframe 的大小设置为像素值：

iframe {
   width: 400px;
   height: 300px; 
}