Вопрос

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

Это было полезно?

Решение

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

то есть:

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

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

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

Использовать Изменение размера JQueryUI

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

соотношение сторон:true -> сохранить исходное соотношение сторон

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

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

Должно быть достаточно просто, чтобы конвертировать в 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;
}

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

getPerfectRatio(img,widthRatio,heightRatio){

  if(widthRatio < heightRatio){
    var height = img.scalingHeight - (img.scalingHeight % heightRatio);
    var finalHeight = height
    var finalWidth = widthRatio * (height/heightRatio);

    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }
  if(heightRatio < widthRatio){;
    var width = img.scalingWidth - (img.scalingWidth % widthRatio);
    var finalWidth = width;
    var finalHeight  = heightRatio * (width/widthRatio);
    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }

  return img
  
}

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top