使用 jQuery 按比例调整 iframe 的大小以适合 DIV

Posted

技术标签:

【中文标题】使用 jQuery 按比例调整 iframe 的大小以适合 DIV【英文标题】:Proportionally resize iframe to fit in a DIV using jQuery 【发布时间】:2013-09-21 05:58:39 【问题描述】:

我在 div 中有一个视频的 iframe,如下所示:

<div class="media">
    <iframe>
</div>

我在窗口调整大小时动态设置 DIV 的大小。

我想缩放 iframe 以适应 div,同时保持其纵横比。大多数代码都处理缩放图像,这更容易。

这是我目前所拥有的,但它不起作用:

jQuery.fn.fitToParent = function()

    this.each(function()
    
        var width  = jQuery(this).width();
        var height = jQuery(this).height();
        var parentWidth  = jQuery(this).parent().width();
        var parentHeight = jQuery(this).parent().height();

        if(width < parentWidth)
        
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        
        else
        
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        

        jQuery(this).css(
            'height'     :newHeight,
            'width'      :newWidth'
        );
    );
;

基本上,我希望复制“背景大小:包含”对 CSS 中的图像所做的调整,但对于 DIV 中的 iframe。

感谢您的帮助!

【问题讨论】:

【参考方案1】:

指出三个问题:

    您的示例中有一个错误(尾随引号):

    :newWidth'

    您需要设置 iframe 的实际高度和宽度属性,而不是样式。设置 iframe 大小的样式无效:

    $(this).width(newWidth);
    $(this).height(newHeight);
    

    纵横比的计算错误(需要比较比率以查看它们重叠的方式)。如果没有这个,就不能满足所有重叠情况。

    var aspect = width/height;
    var parentAspect = parentWidth/parentHeight;
    if (aspect > parentAspect)
    
        newWidth  = parentWidth;
        newHeight = newWidth / aspect;
    
    else
    
        newHeight = parentHeight;
        newWidth  = newHeight * aspect;
    
    

我还稍微清理了代码以加快元素访问速度。每次调用 jQuery(this) 都会花费周期。

JSFiddle 在这里:http://jsfiddle.net/TrueBlueAussie/ZJDkF/8/

更新:

jsfiddle 现在有 4 种不同重叠场景的示例,每个场景都保留了 iframe 的比例。我还添加了你提到的窗口调整大小,并用它动态调整第一个 div 的大小来演示。

【讨论】:

这太棒了,做得很好。我会尽快奖励赏金。 Safari 会在调整大小时降低比例,因为舍入误差累加。所以我保存了显示的纵横比,他们将这个比例用于未来的所有尺寸调整:jsfiddle.net/ZJDkF/9【参考方案2】:

随着时间的推移,我对@TrueBlueAussie 的答案确实有所改进,并认为我会在此处发布更复杂的答案以供将来参考。

在此处将其作为 GitHub 上的插件:https://github.com/drewbaker/fitToParent

这里是 jQuery 插件:

jQuery.fn.fitToParent = function (options) 

    this.each(function () 

        // Cache the resize element
        var $el = jQuery(this);

        // Get size parent (box to fit element in)
        var $box;
        if( $el.closest('.size-parent').length ) 
            $box = $el.closest('.size-parent');
         else 
            $box = $el.parent();
        

        // These are the defaults.
        var settings = jQuery.extend(  
                height_offset: 0,
                width_offset: 0,
                box_height: $box.height(),
                box_width: $box.width(),
        , options );

        // Setup box and element widths
        var width = $el.width();
        var height = $el.height();
        var parentWidth = settings.box_width - settings.width_offset;
        var parentHeight = settings.box_height - settings.height_offset;

        // Maintin aspect ratio
        var aspect = width / height;
        var parentAspect = parentWidth / parentHeight;

        // Resize to fit box
        if (aspect > parentAspect) 
            newWidth = parentWidth;
            newHeight = (newWidth / aspect);
         else 
            newHeight = parentHeight;
            newWidth = newHeight * aspect;
        

        // Set new size of element
        $el.width(newWidth);
        $el.height(newHeight); 

    );
;

所以,假设你有这样的 html

<div id="wrapper">
    <iframe   src="//player.vimeo.com/video/19223989"></iframe>
</div>

插件最基本的调用方式是这样的:

jQuery('#wrapper iframe').fitToParent();

但我会经常将#wrapper 设置为接近窗口的高度和宽度,如下所示:

// Get window height and width
var winHeight = jQuery(window).height();
var winWidth = jQuery(window).width();

// Set wrapper height/width to that of window
jQuery('#wrapper').height(winHeight).width(winWidth);

// Size Iframe
jQuery('#wrapper iframe').fitToParent(
    height_offset: 100, // Put some space around the video
    width_offset: 100, // Put some space around the video
);

您还可以输入自定义框大小以适应元素,如下所示:

// Get window height and width
var winHeight = jQuery(window).height();
var winWidth = jQuery(window).width();

// Size element
jQuery('#wrapper iframe').fitToParent(
    height_offset: 100, // Put some space around the video
    width_offset: 100, // Put some space around the video
    box_height: winHeight, // Force use of this box size
    box_width: winWidth // Force use of this box size
);

我还添加了将 CSS 类“size-parent”设置为父元素的功能,然后它将使用该父元素作为框大小。一个完整的例子:

// HTML like this
<div id="wrapper" class="size-parent">
    <div class="media">
        <iframe   src="//player.vimeo.com/video/19223989"></iframe>
    </div>
</div>

// jQuery like this
jQuery('.media iframe').fitToParent();    

如果您不设置 .size-parent,它将回退到元素父级。如果您设置 box_height/box_width 参数,那么这些参数显然会覆盖所有内容。

现在,为了展示它的强大功能,试试这个垂直居中、水平居中纵横比正确的 iFrame!

// CSS like this
#wrapper 
    text-align: center;
    display: table-cell;
    vertical-align: middle;

#wrapper iframe 
    display: inline-block;


// HTML like this
<div id="wrapper" class="size-wrapper">
    <iframe   src="//player.vimeo.com/video/19223989"></iframe>
</div>

// jQuery like this
// Get window height and width
var winHeight = jQuery(window).height();
var winWidth = jQuery(window).width();

// Size wrapper
jQuery('#wrapper').height( winHeight ).width( winWidth );

// Size element
jQuery('#wrapper iframe').fitToParent(
    height_offset: 200, // Put some space around the video
    width_offset: 200, // Put some space around the video
);

// Fit iFrame to wrapper
jQuery('#wrapper iframe').fitToParent();

在现实生活中,我将 jQuery 包装在一个函数中,然后在调整窗口大小时调用该函数以获得真正的响应式 iFrame!

【讨论】:

【参考方案3】:

这里:

http://jsfiddle.net/fFTS8/

  <div id="test" style="width:300px;height:200px;background:red;"></div>
  <script src="js/vendor/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
     jQuery.fn.fitToParent = function()
     
        var that = this;

        function rezise() 
           that.each(function()
           
             var a = $(this).width();
             var b = $(this).height();
             var c = $(this).parent().width();
             var d = $(this).parent().height();

             var ab = a/b;
             var cd = c/b;

             var e, f = 0; // e - newWidth, f - newHeight

             if(ab > cd) 
                e = c;
                f = c*b/a;
              else 
                e = a*d/b;
                f = d;
             

             $(this).width(e);
             $(this).height(f);
           );
        

        $(window).resize(function() 
           rezise();
        );
     ;
     $('#test').fitToParent();

  </script>

【讨论】:

根据提问者的说法,iframe 旨在调整为父 div 的大小。这个是向后的,将 div 的大小调整为 JSFiddle iframe。

以上是关于使用 jQuery 按比例调整 iframe 的大小以适合 DIV的主要内容,如果未能解决你的问题,请参考以下文章

如何按比例调整图像大小/保持纵横比?

iframe调用子页面按子页面的内容自动调整高度

jQuery动态比例元素/图像调整大小

按比例调整图像大小以适合 HTML5 画布

使用jQuery动态调整iframe高度,以及jQuery对dom元素的监听

使用 CSS 按比例调整图像大小? [复制]