Масштабирование изображения в CSS: от процента исходного размера

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

Для быстрого изменения размера изображения в процентах от исходного, функция transform: scale() в CSS станет весьма кстати. Если необходимо уменьшить изображение – используйте значение меньше 1, для увеличения — больше 1.

Сделаем изображение в два раза меньше:

img {
  transform: scale(0.5);  // Настоящий инструмент для масштабирования изображений!
}

Хотите увеличить изображение в два раза?

img {
  transform: scale(2);  // Иногда размер действительно имеет значение!
}

Пробуйте различные значения масштабирования – 0.5, 2 и так далее, пока не добьётесь нужного размера.

Разные экраны, разные сценарии – Респонсивный подход

Transform: scale() удобен, но его возможности не безграничны — он не влияет на реальные размеры элемента в верстке. Тут на помощь придёт использование процентов для width, max-width и единиц vw, что обеспечит гибкость и адаптивность изображений:

img {
  max-width: 100%;  // Содержимся в заданных размерах
  width: 50vw;      // Занимаем половину от ширины viewport'а
  height: auto;     // Сохраняем пропорции
}

Такой подход поможет изображению адаптироваться к размерам контейнера, сохраняя при этом правильные пропорции.

Оборачивание в контейнер – Абсолютный подход

Установка абсолютного позиционирования изображения в контейнере дает возможность контролировать его размеры исходя из границ контейнера, а не только размеров родительского блока. overflow: hidden позволит обеспечить надлежащее отображение:

<div class="wrapper">  <!-- Вашему изображению приготовлено отдельное пространство -->
  <img src="image.jpg" alt="" />
</div>

.wrapper {
  position: relative;
  width: 50%;        /* Ставим ограничение по ширине */
  overflow: hidden;  /* Избегаем выхода содержимого за границы */
}

.wrapper img {
  width: 100%;    /* Изображение аккуратно заполняет контейнер */
  height: auto;
  display: block; /* Убираем нежелательные отступы */
}

Так, .wrapper уменьшается до 50% ширины родительского контейнера, а изображение занимает всё доступное пространство.

Оптимальное отображение для каждого – Респонсивность с srcset

Применяя атрибут srcset в теге <img>, можно определить несколько источников изображения в зависимости от экрана:

<img src="image.jpg" alt=""
     srcset="image-320w.jpg 320w,
             image-640w.jpg 640w,
             image-1280w.jpg 1280w"
     sizes="(max-width: 640px) 50vw, 25vw">  // Оптимизируем изображение для лучшего отображения

Браузер самостоятельно выберет оптимальный размер изображения, ориентируясь на текущие размеры окна просмотра и способности устройства.

Будьте бдительны!

Свойства флотации float, позиционирования position или ограничения ширины min-width/max-width могут влиять на расположение изображений в вёрстке. Проживайте тестировать результат в различных условиях.

Наглядный пример изменения размеров

Масштабирование изображения можно сравнить с изменением размера воздушного шарика:

Перед: 🎈(100%)

Уменьшим его до 50%, как будто просто выпускаем из него воздух:

/* Уменьшаем изображение вдвое */
.image-selector {
  width: 50%;  // Элегантно и просто
  height: auto;
}

После изменения:

После масштабирования: 🎈👌(50%)

Как видно, это довольно просто осуществимо и при этом сохраняется форма шарика!

Выход за рамки обыденного – Продвинутое масштабирование

Для более детального контроля над размерами изображения можно использовать свойства из CSS3, определяющие внутренние и внешние размеры элементов в рамках адаптивных компонентов. Например, figure в качестве гибкого контейнера:

figure {
  width: min-content; // Сжимаем до минимума для того чтобы тесно облегать изображение
}

img {
  width: 100%; // Растягиваем под размер контейнера
  height: auto;
}

С помощью min-content элемент figure идеально облегает содержимое, что позволяет точно контролировать внешний вид элементов.

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

1. background-size – CSS: Cascading Style Sheets | MDN — Детальное обсуждение свойства background-size для масштабирования фоновых изображений.
2. CSS transform property — Выясняем всё о преобразованиях в CSS.
3. CSS Height, Width and Max-width — Подробный обзор размеров в CSS.
4. CSS Backgrounds and Borders Module Level 3 — Официальная спецификация CSS по свойствам фонов и границ.
5. Fluid Images – A List Apart — Глубокое исследование темы адаптивных изображений.
6. max-width – CSS: Cascading Style Sheets | MDN — Как сделать изображения адаптивными с помощью max-width.
7. calc() – CSS: Cascading Style Sheets | MDN — Использование функции calc() для работы с процентными и пиксельными значениями.

Завершение

Вспомните: искусство достигается через практику. Если этот материал был полезен, оставьте отзыв. Желаю вам успешного кодинга и безошибочной отладки!👩‍💻🐞🐛