Пропорционално преоразмерете iframe, за да се побере в DIV с помощта на jQuery

Имам iframe на видео в div, така:

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

Зададох размера на DIV динамично при преоразмеряване на прозореца.

Искам да мащабирам вградената рамка, за да се побере в 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: contain" прави за изображения в CSS, но за iframe в DIV.

Благодаря за помощта!


person Drew Baker    schedule 16.09.2013    source източник


Отговори (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 да преоразмерява динамично с него, за да демонстрирам.

person Gone Coding    schedule 19.09.2013
comment
Това е невероятно, много добре направено. Ще дам наградата веднага щом ми позволи. - person Drew Baker; 19.09.2013
comment
Safari би загубил съотношението при преоразмеряване, поради сумиране на грешки при закръгляване. Така че запазих пропорцията на екрана и те използваха това съотношение за всички бъдещи оразмерявания: jsfiddle.net/ZJDkF/ 9 - person Drew Baker; 19.09.2013

Наистина подобрих отговора от @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
});

Също така добавих възможността да задам CSS клас на "size-parent" към родителски елемент и след това той ще използва този родителски елемент за размера на полето. Пълен пример за това:

// 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 във функция и след това извиквам тази функция при преоразмеряване на прозореца за истински отзивчиви iFrames!

person Drew Baker    schedule 09.08.2014

тук:

http://jsfiddle.net/fFTS8/

  <div id="test" style="width:300px;height:200px;background:red;"></div>
  <script src="js/vendor/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
     jQuery.fn.fitToParent = function()
     {
        var that = this;

        function rezise() {
           that.each(function()
           {
             var a = $(this).width();
             var b = $(this).height();
             var c = $(this).parent().width();
             var d = $(this).parent().height();

             var ab = a/b;
             var cd = c/b;

             var e, f = 0; // e - newWidth, f - newHeight

             if(ab > cd) {
                e = c;
                f = c*b/a;
             } else {
                e = a*d/b;
                f = d;
             }

             $(this).width(e);
             $(this).height(f);
           });
        }

        $(window).resize(function() {
           rezise();
        });
     };
     $('#test').fitToParent();

  </script>
person marverix    schedule 19.09.2013
comment
Според питащия iframe е предназначен да преоразмерява родителския div. Този е назад и преоразмерява div към JSFiddle iframe. - person Gone Coding; 19.09.2013