jQuery изменить размер до соотношения сторон
Базовые числовые типы могут представлять 2 ^ n чисел. Посмотрите на случай n = 2. Вы можете представить четыре случая, давайте назовем их a, b, c, d. Тогда вы можете согласиться либо на a=-2, b=-1, c=0, d=1 (это принято), либо a=-1, b=0, c=1, d=2 (возможно, но не используется). Итак, если у вас есть только один нуль и удерживайте 2 ^ n состояния, ваш abs(min) != max Увеличение n перемещает границы, но abs(min) != max все еще сохраняется.
3 ответа
Вы можете вычислить это вручную,
то есть:
function GetWidth(newHeight,orginalWidth,originalHeight)
{
if(currentHeight == 0)return newHeight;
var aspectRatio = currentWidth / currentHeight;
return newHeight * aspectRatio;
}
Убедитесь, что вы используете ОРИГИНАЛЬНЫЕ значения для изображения, иначе оно со временем ухудшится.
РЕДАКТИРОВАТЬ: пример версии jQuery ( не тестировалось)
jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
var aspectRatio = $(this).data('aspectRatio');
if (aspectRatio == undefined) {
aspectRatio = $(this).width() / $(this).height();
$(this).data('aspectRatio', aspectRatio);
}
$(this).height(newHeight);
$(this).width(parseInt(newHeight * aspectRatio));
}
Вот полезная функция, которая может делать то, что вы хотите:
jQuery.fn.fitToParent = function()
{
this.each(function()
{
var width = $(this).width();
var height = $(this).height();
var parentWidth = $(this).parent().width();
var parentHeight = $(this).parent().height();
if(width/parentWidth < height/parentHeight) {
newWidth = parentWidth;
newHeight = newWidth/width*height;
}
else {
newHeight = parentHeight;
newWidth = newHeight/height*width;
}
var margin_top = (parentHeight - newHeight) / 2;
var margin_left = (parentWidth - newWidth ) / 2;
$(this).css({'margin-top' :margin_top + 'px',
'margin-left':margin_left + 'px',
'height' :newHeight + 'px',
'width' :newWidth + 'px'});
});
};
По сути, она захватывает элемент, центрирует его внутри родительского элемента, а затем растягивает его, чтобы он соответствовал так, чтобы ни один фон родительского элемента не был видимым, с сохранением соотношения сторон.
Опять же, это может быть не то, что вы хотите сделать.
$("#some_image").resizable({ aspectRatio:true, maxHeight:300 });
aspectRatio: true -> maintain original aspect ratio