Пропорциональное изменение размера изображений в jQuery

Быстрый ответ

Для сохранения пропорций изображения при его масштабировании задайте CSS-свойство height: auto;. Это свойство позволяет автоматически подгонять высоту под установленную ширину:

img {
  width: 50%;  /* Вы можете выбрать значение по своему усмотрению */
  height: auto; /* Позволяет сохранить пропорции изображения */
}

Если требуется сменить размер изображения через JavaScript, расчитайте необходимую высоту, исходя из соотношения сторон:

function resizeImage(img, targetWidth) {
  img.height = targetWidth / (img.width / img.height);
  img.width = targetWidth;
}

Создайте и вызовите функцию resizeImage, передав в неё элемент изображения и желаемую ширину для пропорционального изменения размера.

Детальнее о JavaScript

Временами может возникнуть такая необходимость, когда размеры изображений требуется менять программно через JavaScript, например, в случае пользовательских медиафайлов. В таком случае пригодится следующий метод, учитывающий максимальные значения maxWidth и maxHeight и при этом сохраняющий исходное соотношение сторон:

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  return { width: srcWidth * ratio, height: srcHeight * ratio };
}

Применяйте эту функцию к изображению вот так:

const aspectRatio = calculateAspectRatioFit(img.naturalWidth, img.naturalHeight, maxWidth, maxHeight);

img.width = aspectRatio.width;
img.height = aspectRatio.height;

Изменяем размеры нескольких изображений

Цикл в JavaScript

Вы можете массово модифицировать размеры нескольких изображений, используя функцию .each() библиотеки jQuery:

$('img').each(function() {
  const maxWidth = 300;
  const maxHeight = 300; 
  const ratio = calculateAspectRatioFit(this.naturalWidth, this.naturalHeight, maxWidth, maxHeight);

  $(this).css('width', ratio.width);
  $(this).css('height', ratio.height);
});

Подробнее об этом расскажет наш спикер на видео

Библиотека CSS

Более того, можно использовать адаптивный веб-дизайн с CSS, указав max-width и max-height равным 100% или какому угодно другому значению:

img {
  max-width: 100%; /* Ограничиваем размер изображения */
  max-height: 100%; /* Уменьшаем масштаб изображения */
  display: block; /* Удаляем лишнее пространство под изображением */
}

Особые случаи

Большие размеры

Работа с изображениями больших размеров может замедлить работу вашего приложения. Для оптимизации процесса загрузки и масштабирования используйте специальные библиотеки.

Точность масштабирования

Для обеспечения точности округляйте значения:

// Результат из calculateAspectRatioFit
const preciseWidth = Math.round(aspectRatio.width);
const preciseHeight = Math.round(aspectRatio.height);

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

Универсальный подход

Изображения могут сильно отличаться по соотношению сторон. Учитывайте это при масштабировании каждого изображения, особенно если вы работаете с галереей или макетом сетки.

Визуализация

Представьте себе масштабирование изображения, как процесс изменения размера окна дома так, что форма его остаётся неизменной:

Оригинальное окно: 🏠 с размером 4x3
                 ______
                |      |
                |      |
                |______|

Изменённый размер: 🏠 всё ещё 4x3, но больше
                 __________
                |          |
                |          |
                |          |
                |__________|

Практические примеры

Каждая ситуация уникальна и требует специфического подхода. Запустите демонстрацию на jsFiddle или CodePen и протестируйте масштабирование изображений в реальном времени.

Полезные материалы

1. Aspect Ratio Boxes | CSS-Tricks – CSS-Tricks — руководство по сохранению соотношения сторон в резиновом веб-дизайне.
2. object-fit – CSS: Cascading Style Sheets | MDN — справочник по свойству object-fit в CSS.
3. How To Create Responsive Images — урок о создании адаптивных изображений.
4. javascript – How to resize images proportionally / keeping the aspect ratio? – Stack Overflow — полезная ветка обсуждения о масштабировании изображений на StackOverflow.
5. Responsive Images Done Right: A Guide To <picture> and srcset — Smashing Magazine — статья о современных методах работы с адаптивными изображениями.
6. object-fit | Codrops — обзор функционала CSS object-fit.
7. Responsive Images in Practice – A List Apart — статья о практическом применении адаптивных изображений.