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

我在div中有一个video的iframe，如下所示：

我在窗口resize时动态设置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' }); }); };

基本上，我希望复制“background-size：contains”对CSS中的图像进行的大小调整，但是对于DIV中的iframe。

谢谢您的帮助！

注意到三个问题：

  1. 您的示例中有错误（尾随引用）：

    :newWidth'

  2. 您需要设置iframe实际高度和宽度属性，而不是样式。 样式化iframe大小无效： 

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

  3. 宽高比的计算是错误的（需要比较比率以查看它们重叠的方式）。 如果没有这一点，并非所有重叠案例都能满足。 

     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的比例。 我还添加了你提到的窗口resize，并使第一个div动态resize以进行演示。

随着时间的推移，我对@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：

调用插件的最基本方法是这样的： 

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

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

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

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

现在，为了展示它的强大function，请尝试使用垂直居中的水平居中纵横比正确的iFrame！ 

 // CSS like this #wrapper { text-align: center; display: table-cell; vertical-align: middle; } #wrapper iframe { display: inline-block; } // HTML like this 
  
 // 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包装在一个函数中，然后在窗口调整该函数resize以获得真正的响应式iFrame！

这里：

http://jsfiddle.net/fFTS8/
Interesting Posts