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