Как пропорционально изменить размер изображения / сохранить соотношение сторон?

Question

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

Может кто-нибудь указать мне какой-нибудь код или объяснитьлогика?

Answer 1

Если изображение пропорционально, тогда этот код заполнит упаковку изображением. Если изображение не пропорционально, дополнительная ширина / высота будет обрезана.

    <script type="text/javascript">
        $(function(){
            $('#slider img').each(function(){
                var ReqWidth = 1000; // Max width for the image
                var ReqHeight = 300; // Max height for the image
                var width = $(this).width(); // Current image width
                var height = $(this).height(); // Current image height
                // Check if the current width is larger than the max
                if (width > height && height < ReqHeight) {

                    $(this).css("min-height", ReqHeight); // Set new height
                }
                else 
                    if (width > height && width < ReqWidth) {

                        $(this).css("min-width", ReqWidth); // Set new width
                    }
                    else 
                        if (width > height && width > ReqWidth) {

                            $(this).css("max-width", ReqWidth); // Set new width
                        }
                        else 
                            (height > width && width < ReqWidth)
                {

                    $(this).css("min-width", ReqWidth); // Set new width
                }
            });
        });
    </script>

Answer 2

Без дополнительных временных переменных или скобок.

    var width= $(this).width(), height= $(this).height()
      , maxWidth=100, maxHeight= 100;

    if(width > maxWidth){
      height = Math.floor( maxWidth * height / width );
      width = maxWidth
      }
    if(height > maxHeight){
      width = Math.floor( maxHeight * width / height );
      height = maxHeight;
      }

Имейте в виду: поисковым системам это не нравится, если атрибуты width и height не соответствуют изображению, но они не знают JS,

Answer 3

Вот исправление к ответу Mehdiway.Новая ширина и / или высота не были установлены на максимальное значение.Хорошим примером является следующий (1768 x 1075 пикселей): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png. (я не смог прокомментировать это выше из-за недостатка репутации).

Answer 4

Изменение размера может быть достигнуто (поддержание соотношения сторон) с помощью CSS.Это еще один упрощенный ответ, вдохновленный постом Дэна Даскалеску.

http://jsbin.com/viqare

img{
     max-width:200px;
 /*Or define max-height*/
  }

<img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg"  alt="Alastair Cook" />

<img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/>

Answer 5

2 Шага:

Шаг 1) вычислите соотношение оригинальной ширины / исходной высоты изображения.

Шаг 2) умножьте соотношение original_width / original_height на новую желаемую высоту, чтобы получитьновая ширина, соответствующая новой высоте.

Answer 6

Посмотрите на этот кусок ...

/**
 * @param {Number} width
 * @param {Number} height
 * @param {Number} destWidth
 * @param {Number} destHeight
 * 
 * @return {width: Number, height:Number}
 */
function resizeKeepingRatio(width, height, destWidth, destHeight)
{
    if (!width || !height || width <= 0 || height <= 0)
    {
        throw "Params error";
    }
    var ratioW = width / destWidth;
    var ratioH = height / destHeight;
    if (ratioW <= 1 && ratioH <= 1)
    {
        var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW > 1 && ratioH <= 1)
    {
        var ratio = 1 / ratioW;
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW <= 1 && ratioH > 1)
    {
        var ratio = 1 / ratioH;
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW >= 1 && ratioH >= 1)
    {
        var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
        width *= ratio;
        height *= ratio;
    }
    return {
        width : width,
        height : height
    };
}

Answer 7

Это полностью сработало для меня для перетаскиваемого элемента - aspectRatio: true

.appendTo(divwrapper).resizable({
    aspectRatio: true,
    handles: 'se',
    stop: resizestop 
})