4

次のように、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'
        });
    });
};

基本的に、「background-size: contains」が CSS の画像に対して行うサイジングを複製しようとしていますが、DIV の iframe に対してです。

助けてくれてありがとう！

4

3 に答える 3

7

指摘された 3 つの問題:

  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 の比率を保持しています。また、あなたが言及したウィンドウのサイズ変更を追加し、最初の div を動的にサイズ変更してデモを行いました。

于 2013-09-19T11:53:35.117 に答える
3

私は@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 width="720" height="405" 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
});

「size-parent」の CSS クラスを親要素に設定する機能も追加しました。これにより、その親要素がボックス サイズに使用されます。その完全な例:

// 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 パラメータを設定すると、明らかにすべてが上書きされます。

さて、これがどれほど強力かを示すために、垂直中央、水平中央のアスペクト比の正しい 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 を作成します。

于 2014-08-09T19:45:58.873 に答える