Як змінити розмір зображень пропорційно / зберігаючи пропорції?


167

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

Чи може хтось вказати мені на якийсь код або пояснити логіку?


4
Чи можете ви пояснити, чому потрібно використовувати jQuery? Є лише рішення CSS (див. Мою відповідь ): встановіть його max-widthі max-heightна 100%.
Дан Даскалеску

9
Про всяк випадок, коли хтось не знає, якщо встановити лише один розмір зображення (ширину чи висоту), він пропорційно змінюється. Це так із зорі Інтернету. Наприклад:<img src='image.jpg' width=200>
GetFree

2
Крім того, ви можете скористатися slimmage.js для збереження пропускної здатності та оперативної пам’яті мобільного пристрою.
Річка Ліліт

Відповіді:


188

Подивіться на цей фрагмент коду з http://ericjuden.com/2009/07/jquery-image-resize/

$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        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 > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});

1
Вибачте, не вистачає певної логіки математика ... що відбувається, коли вам потрібно все це збільшити (скажімо, ви збільшуєте maxHeight)?
Бен

4
Чи можна це зробити лише за допомогою CSS? (максимальна ширина, висота: авто тощо)
Тронатан

11
Не впевнений, для чого потрібен jQuery. Пропорційно зменшити зображення на клієнті можна за допомогою CSS, і це банально: просто встановіть його max-widthі max-heightна 100%. jsfiddle.net/9EQ5c
Дан Даскалеску

10
Цього не можна зробити з CSS через МОЖЛИВОСТІ ІФ. Я вважаю, що справа в заповненні мініатюрного зображення. Якщо зображення занадто високе, воно повинно бути максимальної ширини, якщо зображення занадто широке, воно повинно бути максимальної висоти. Якщо ви зробите CSS max-width, max-height, ви отримаєте мініатюри з пробілом замість повністю заповненого
ntgCleaner

Чи може цей код викликати проблеми в браузерах, збої чи сповільнення ??
Дежа Бонд

444

Я думаю, що це дійсно класний метод :

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }

33
По-справжньому чудова відповідь! Правильна відповідь падає на обличчя, якщо висота І ширина обидва більше. Дійсно, хороший, теж приємні вуса.
Старкерс

1
Ви маєте рацію щодо цього @sstauross, десяткові пікселі можуть мати дещо несподівані результати . У моєму випадку використання, однак, це було незначно. Думаю Math.floor, справді допоможе ідеальний дизайн пікселя :-)
Джейсон Дж. Натан

1
Спасибі, мені знадобився цей майже «однолінійний».
Ернан

1
Дякую, Джейсон, ця відповідь мені дуже допомогла.
Ашок Шах

4
Це фантастичний спосіб вирішення цього питання! Я трохи function imgSizeFit(img, maxWidth, maxHeight){ var ratio = Math.min(1, maxWidth / img.naturalWidth, maxHeight / img.naturalHeight); img.style.width = img.naturalWidth * ratio + 'px'; img.style.height = img.naturalHeight * ratio + 'px'; }
підробив

70

Якщо я правильно розумію питання, вам навіть не потрібен jQuery для цього. Стиснення зображення пропорційно на клієнті може бути зроблено з допомогою CSS тільки: просто встановіть його max-widthі max-heightв 100%.

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
</div>​

Ось загадка: http://jsfiddle.net/9EQ5c/


2
Це набагато простіша відповідь, ніж вище. Дякую. btw, як ви отримали посилання "моя відповідь", щоб прокрутити вниз до своєї публікації?
SnareChops

@SnareChops: це просто якор HTML .
Дан Даскалеску

1
@SnareChops: якщо ви використовуєте посилання, яке надається посиланням "поділитися" під відповіддю, воно також прокрутить до відповіді.
Flimm

1
@Flimm Оскільки проміжки не відображаються: блокуйте за замовчуванням. Просто додайте display: block або зробіть його ділом.
mahemoff

1
У моєму випадку IMG було надано разом з WordPress, щоб він встановив ширину та висоту капелюхів. У CSS мені також довелося налаштувати width: auto; height: auto;ваш код :)
lippoliv

12

Для того, щоб визначити співвідношення сторін , вам потрібно мати співвідношення, на яке слід прагнути.

Висота

function getHeight(length, ratio) {
  var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
  return Math.round(height);
}

Ширина

function getWidth(length, ratio) {
  var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
  return Math.round(width);
}

У цьому прикладі я використовую, 16:10оскільки це типове співвідношення сторін монітора.

var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);

console.log(height);
console.log(width);

Результати зверху були б 147і300


Враховуючи, що 300 = діагональна ширина = висота * співвідношення та висота такі самі, як ви сказали
Джонні Пий

6

насправді я щойно зіткнувся з цією проблемою, і знайдене нами рішення було дивно простим і дивним

$("#someimage").css({height:<some new height>})

і дивом зображення змінюється на нову висоту і зберігає те саме співвідношення!


1
Я думаю, що це корисно - але я вважаю, що це не
обмежить

Цей матеріал працює, коли ви не встановите інший атрибут. (ширина в цьому випадку)
NoobishPro

4

Для цієї проблеми є 4 параметри

  1. поточна ширина зображення iX
  2. поточна висота зображення iY
  3. цільова ширина області перегляду cX
  4. цільова висота вікна перегляду cY

І є 3 різні умовні параметри

  1. cX> cY?
  2. iX> cX?
  3. iY> cY?

рішення

  1. Знайдіть меншу сторону порту цільового виду F
  2. Знайдіть більшу сторону поточного порту огляду L
  3. Знайдіть коефіцієнт обох F / L = коефіцієнт
  4. Помножте обидві сторони поточного порту на коефіцієнт, тобто, fX = iX * фактор; fY = iY * фактор

це все, що вам потрібно зробити.

//Pseudo code


iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height

1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk

2. lE = iX > iY ? iX: iY; //long edge

3. if ( cX < cY )
   then
4.      factor = cX/lE;     
   else
5.      factor = cY/lE;

6. fX = iX * factor ; fY = iY * factor ; 

Це зрілий форум, я не даю вам код для цього :)


2
Опублікувати метод за цим чудово, але я відзначаю вас, що насправді не допомагаєте користувачеві, розміщуючи код. Здається трохи обструктивно
Doidgey

6
"Чи може хтось вказати мені на якийсь код або пояснити логіку?" - Зрозуміло, він був у порядку з тим, що йому пояснили лише метод. Особисто я вважаю, що це був би кращий спосіб допомогти комусь, допомогти їм зрозуміти методи, а не копіювати та вставляти код.
JessMcintosh

@JessMcintosh, шкода, що мільярди правок на оригінальне запитання вивели ваш коментар із контексту :)
Jason J. Nathan

4

Чи <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >допомагає?

Браузер подбає про збереження співвідношення сторін недоторканим.

тобто max-widthудари, коли ширина зображення більша за висоту, і його висота буде розрахована пропорційно. Аналогічноmax-height буде діяти, коли висота більша за ширину.

Для цього вам не потрібен жоден jQuery або javascript.

Підтримується ie7 + та іншими браузерами ( http://caniuse.com/minmaxwh ).


Чудова порада! Просто було б помістити CSS у файл CSS, а не безпосередньо в html-код.
Марк

Я думаю, що проблема в цьому полягає в тому, що він не працюватиме, коли ви не знаєте, що таке максимальна ширина та максимальна висота, поки сторінка не завантажиться. Ось чому потрібне рішення JS. Зазвичай це стосується чуйних сайтів.
Джейсон Дж. Натан

2

Це має працювати для зображень з усіма можливими пропорціями

$(document).ready(function() {
    $('.list img').each(function() {
        var maxWidth = 100;
        var maxHeight = 100;
        var width = $(this).width();
        var height = $(this).height();
        var ratioW = maxWidth / width;  // Width ratio
        var ratioH = maxHeight / height;  // Height ratio

        // If height ratio is bigger then we need to scale height
        if(ratioH > ratioW){
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratioW);  // Scale height according to width ratio
        }
        else{ // otherwise we scale width
            $(this).css("height", maxHeight);
            $(this).css("width", height * ratioH);  // according to height ratio
        }
    });
});

2

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

  // Make sure image doesn't exceed 100x100 pixels
  // note: takes jQuery img object not HTML: so width is a function
  // not a property.
  function resize_image (image) {
      var maxWidth = 100;           // Max width for the image
      var maxHeight = 100;          // Max height for the image
      var ratio = 0;                // Used for aspect ratio

      // Get current dimensions
      var width = image.width()
      var height = image.height(); 
      console.log("dimensions: " + width + "x" + height);

      // If the current width is larger than the max, scale height
      // to ratio of max width to current and then set width to max.
      if (width > maxWidth) {
          console.log("Shrinking width (and scaling height)")
          ratio = maxWidth / width;
          height = height * ratio;
          width = maxWidth;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }

      // If the current height is larger than the max, scale width
      // to ratio of max height to current and then set height to max.
      if (height > maxHeight) {
          console.log("Shrinking height (and scaling width)")
          ratio = maxHeight / height;
          width = width * ratio;
          height = maxHeight;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }
  }

2
$('#productThumb img').each(function() {
    var maxWidth = 140; // Max width for the image
    var maxHeight = 140;    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    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 = ( height / width ) * maxHeight;

    } else if(height > width){
        maxWidth = (width/height)* maxWidth;
    }
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", maxHeight);  // Scale height based on ratio
});

5
Будь ласка, врахуйте, щоб додати пояснення, а не лише код, відповідаючи на повідомлення
Jørgen R

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>

1

Без додаткових тимчасових ваг чи дужок.

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

Майте на увазі: пошукові системи не люблять, якщо атрибут ширини та висоти не відповідає зображенню, але вони не знають JS.


1

Після деяких проб і помилок я прийшов до цього рішення:

function center(img) {
    var div = img.parentNode;
    var divW = parseInt(div.style.width);
    var divH = parseInt(div.style.height);
    var srcW = img.width;
    var srcH = img.height;
    var ratio = Math.min(divW/srcW, divH/srcH);
    var newW = img.width * ratio;
    var newH = img.height * ratio;
    img.style.width  = newW + "px";
    img.style.height = newH + "px";
    img.style.marginTop = (divH-newH)/2 + "px";
    img.style.marginLeft = (divW-newW)/2 + "px";
}

1

Змінення розміру можна досягти (підтримуючи співвідношення сторін) за допомогою 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"/>


1

2 кроки:

Крок 1) обчислити співвідношення вихідної ширини / оригінальної висоти зображення.

Крок 2) помножте співвідношення original_width / original_height на нову бажану висоту, щоб отримати нову ширину, відповідну новій висоті.



-4

Це повністю працювало для мене для перетягуваного предмета - aspektRatio: true

.appendTo(divwrapper).resizable({
    aspectRatio: true,
    handles: 'se',
    stop: resizestop 
})
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.