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

概述我在div中有一个视频的iframe,如下所示： <div class="media"> <iframe></div> 我在窗口调整大小时动态设置DIV的大小. 我想缩放iframe以适应div内部,同时保持它的纵横比.大多数代码处理缩放图像,这更容易. 这是我到目前为止,但它不起作用： jQuery.fn.fitToParent = function(){ this.each 我在div中有一个视频的iframe,如下所示：

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

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

谢谢您的帮助！

解决方法 注意到三个问题：

>您的示例中有错误(尾随引用)：

：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动态调整大小以进行演示.

总结

以上是内存溢出为你收集整理的按比例调整iframe大小以适应使用jQuery的DIV全部内容，希望文章能够帮你解决按比例调整iframe大小以适应使用jQuery的DIV所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。