jQuery изменение размера до соотношения сторон

Question

Как изменить размер изображения в jQuery на согласованное соотношение сторон. Например, установите максимальную высоту и правильно измените ширину. Благодарю.

Answer 1

Вы можете вычислить это вручную,

т.е .:

function GetWidth(newHeight,orginalWidth,originalHeight) 
{ 
if(currentHeight == 0)return newHeight; 
var aspectRatio = currentWidth/currentHeight; 
return newHeight * aspectRatio; 
} 

Убедитесь, что вы используете исходные значения для изображения в противном случае она будет ухудшаться со временем.

EDIT: пример 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)); 
} 

Answer 2

Использование JQueryUI Resizeable

$("#some_image").resizable({ aspectRatio:true, maxHeight:300 }); 

AspectRatio: правда -> сохранить исходное соотношение сторон

Answer 3

Вот полезная функция, которая может делать то, что вы хотите:

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

В принципе, он захватывает элемент, центрирует его внутри родителя, а затем растягивает его так, чтобы ни один фон родителя не был виден, сохраняя соотношение сторон.

Опять же, это может быть не то, что вы хотите сделать.

Answer 4

Там нет учета количества копий и пастеров там, а! Я также хотел знать это, и все, что я видел, было бесконечными примерами масштабирования ширины или высоты .. кто хотел бы, чтобы другой переполнял ?!

• ширина Изменение размера и высоты без необходимости цикла
• не превышает первоначальные размеры изображения
• Использует математику, которая работает должным образом, т.е. ширина/аспект по высоте, а высота * аспект для ширины так изображений фактически масштабируется должным образом вверх и вниз:/

Должно быть прямо вперед достаточно, чтобы преобразовать в Javascript или других языках

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Width; 
    double srcHeight = img.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
}