使用jQuery按比例调整iframe的大小以适合DIV [英] Proportionally resize iframe to fit in a DIV using jQuery
问题描述
我在div中有一个视频的iframe，如下所示:
I have an iframe of a video inside a div, like so:
<div class="media">
<iframe>
</div>
我在调整窗口大小时动态设置DIV的大小.
I set the DIV's size dynamically on window resize.
我要缩放iframe以使其适合div，同时保持其长宽比.那里的大多数代码都处理缩放图像，这更容易.
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'
});
});
};
基本上，我希望复制"background-size:contain"用于CSS中图像的大小，但是用于DIV中iframe.
Basically, I'm looking to replicate the sizing that "background-size: contain" does for images in CSS, but for an iframe in a DIV.
感谢您的帮助！
推荐答案
随着时间的推移，我对@TrueBlueAussie的答案有了真正的改进，并认为我会在此处发布更复杂的答案以供将来参考.
I have really improved on the answer from @TrueBlueAussie over time, and thought I'd post a more sophisticated answer here for future reference.
在GitHub上将其制成插件: https://github.com/drewbaker/fitToParent
Made it a plugin on GitHub here: https://github.com/drewbaker/fitToParent
这是jQuery插件:
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);
});
};
因此，假设您拥有以下HTML:
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();
但是我经常将#wrapper设置为接近窗口的高度和宽度，如下所示:
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
});
我还添加了将CSS类"size-parent"设置为父元素的功能，然后它将使用该父元素作为盒子的大小.一个完整的例子:
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();
如果未设置.size-parent，它将回退到父元素.如果设置box_height/box_width参数，则这些参数将明显覆盖所有内容.
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.
现在，要显示此功能多么强大，请尝试使用垂直居中，水平居中的宽高比正确的iFrame！
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();
在现实生活中，我将jQuery包装在一个函数中，然后在窗口调整大小时调用该函数以获得真正的响应性iFrame！
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屋！
