使用 jQuery 按比例调整 iframe 的大小以适应 DIV [英] Proportionally resize iframe to fit in a DIV using jQuery

问题描述

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

<iframe>

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

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

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

jQuery.fn.fitToParent = function(){this.each(函数(){var width = jQuery(this).width();var height = jQuery(this).height();var parentWidth = jQuery(this).parent().width();var parentHeight = jQuery(this).parent().height();如果(宽度<父宽度){newWidth = parentWidth;newHeight = newWidth/width*height;}别的{newHeight = parentHeight;newWidth = newHeight/height*width;}jQuery(这个).css({高度":新高度，'宽度':新宽度'});});};

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

感谢您的帮助！

解决方案

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

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

这是 jQuery 插件:

jQuery.fn.fitToParent = 函数(选项){this.each(函数(){//缓存调整大小的元素var $el = jQuery(this);//获取大小父(框以适应元素)var $box;if( $el.closest('.size-parent').length ) {$box = $el.closest('.size-parent');} 别的 {$box = $el.parent();}//这些是默认值.var 设置 = jQuery.extend({高度偏移:0，宽度偏移:0，box_height: $box.height(),box_width: $box.width(),}， 选项 );//设置框和元素宽度var width = $el.width();var height = $el.height();var parentWidth = settings.box_width - settings.width_offset;var parentHeight = settings.box_height - settings.height_offset;//保持纵横比var 方面 = 宽度/高度；var parentAspect = parentWidth/parentHeight;//调整大小以适合框如果(方面> parentAspect){newWidth = parentWidth;newHeight = (newWidth/aspect);} 别的 {newHeight = parentHeight;newWidth = newHeight * 方面；}//设置元素的新大小$el.width(newWidth);$el.height(newHeight);});};

所以，假设你有这样的 HTML:

<iframe width="720" height="405" src="//player.vimeo.com/video/19223989"></iframe>

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

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

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

//获取窗口高度和宽度var winHeight = jQuery(window).height();var winWidth = jQuery(window).width();//将包装器的高度/宽度设置为窗口的高度/宽度jQuery('#wrapper').height(winHeight).width(winWidth);//大小 iframejQuery('#wrapper iframe').fitToParent({height_offset: 100,//在视频周围留一些空间width_offset: 100,//在视频周围留一些空间});

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

//获取窗口高度和宽度var winHeight = jQuery(window).height();var winWidth = jQuery(window).width();//大小元素jQuery('#wrapper iframe').fitToParent({height_offset: 100,//在视频周围留一些空间width_offset: 100,//在视频周围留一些空间box_height: winHeight,//强制使用此框大小box_width: winWidth//强制使用此框大小});

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

//这样的 HTML<div id="wrapper" class="size-parent"><div class="media"><iframe width="720" height="405" src="//player.vimeo.com/video/19223989"></iframe>

//像这样的 jQueryjQuery('.media iframe').fitToParent();

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

现在，为了展示这有多强大，试试这个垂直居中、水平居中的纵横比正确的 iFrame！

//这样的 CSS#包装{文本对齐:居中；显示:表格单元格；垂直对齐:中间；}#wrapper iframe {显示:内联块；}//像这样的 HTML<div id="wrapper" class="size-wrapper"><iframe width="720" height="405" src="//player.vimeo.com/video/19223989"></iframe>

//像这样的 jQuery//获取窗口高度和宽度var winHeight = jQuery(window).height();var winWidth = jQuery(window).width();//尺寸包装jQuery('#wrapper').height(winHeight).width(winWidth);//大小元素jQuery('#wrapper iframe').fitToParent({height_offset: 200,//在视频周围留一些空间width_offset: 200,//在视频周围留一些空间});//使 iFrame 适合包装器jQuery('#wrapper iframe').fitToParent();

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

I have an iframe of a video inside a div, like so:

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

I set the DIV's size dynamically on window resize.

I want to scale the iframe to fit inside the div, while maintaining it's aspect ratio. Most of the code out there deals with scaling images, which is easier.

This is what I have so far, but it doesn't work:

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'
        });
    });
};

Basically, I'm looking to replicate the sizing that "background-size: contain" does for images in CSS, but for an iframe in a DIV.

Thanks for the help!

解决方案

I have really improved on the answer from @TrueBlueAussie over time, and thought I'd post a more sophisticated answer here for future reference.

Made it a plugin on GitHub here: https://github.com/drewbaker/fitToParent

Here is the jQuery plugin:

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); 

    });
};

So, assuming you have HTML of this:

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

The most basic way to call the plugin is like this:

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

But I'll often set #wrapper to be close to window height and width, like this:

// 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
});

You can also feed in a custom box size to fit the element in, like this:

// 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
});

I've also added the ability to set a CSS class of "size-parent" to a parent element, and it will then use that parent element for the box size. A full example of that:

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

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

If you don't set a .size-parent, it will fallback to the element parent. If you set the box_height/box_width parameter, then those override everything obviously.

Now, to show how powerful this can be, try this for a vertically centered, horizontal centered aspect ratio correct 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 width="720" height="405" 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();

In real life, I wrap the jQuery in a function, and then call that function on window resize for true responsive iFrames!

这篇关于使用 jQuery 按比例调整 iframe 的大小以适应 DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！