CSS: Делаем все изображения одинаковыми по размеру

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

Для приведения изображений разной высоты и ширины к одному размеру в CSS задайте фиксированные параметры width и height, а также примените свойство object-fit. Реализовать это можно с помощью следующих строк кода:

.img-same-size {
  width: 150px;   /* устанавливаем ширину */
  height: 200px;  /* устанавливаем высоту */
  object-fit: cover;  /* сохраняем пропорции изображения */
}

В HTML примените такую конструкцию:

<img src="image.jpg" class="img-same-size" />

Не забудьте вставить реальный путь к вашему изображению вместо image.jpg. Свойство object-fit: cover; подстраивает изображение под размеры, заданные в CSS, с сохранением его пропорций.

Применение концепции единообразия размеров

Создание единообразных контейнеров div

Для создания величественных сеток очень полезны контейнеры div:

.div-same-size {
  width: 150px;
  height: 200px;
  overflow: hidden; /* предотвращаем выход изображения за границы контейнера */
}

.div-same-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="div-same-size">
  <img src="image.jpg" />
</div>

Этот метод предотвращает переполнение и гарантирует стабильность вашей верстки.

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

Использование метода сжатия для больших изображений

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

.img-scale-down {
  max-width: 100%;  /* сжимаем, если изображение слишком велико */
  height: auto;     /* сохраняем пропорции */
  object-fit: scale-down; /* предотвращаем деформацию */
}

Благодаря этому изображения сохранят свою четкость и не будут препятствовать отображению мелких элементов.

Применение адаптивного размера изображений

Для отзывчивого веб-дизайна стоит использовать относительные единицы:

.img-responsive {
  width: 20vw;   /* ширина зависит от viewport */
  height: 30vw;  /* высота также корректируется в зависимости от viewport */
  object-fit: cover; /* сохраняем пропорции изображения */
}

Выбирайте относительные единицы осознанно, чтобы поддерживать корректные пропорции изображений.

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

Взглянем на группу различных рамок, содержащих изображения разнообразных размеров:

До: 🖼️🌄 🖼️🏞️ 🖼️🌆 🖼️🏔️
Размеры:  [5x7] [8x10] [9x12] [7x5]

Применив рассмотренные CSS-техники, мы получим:

После: 🖼️🌄 🖼️🏞️ 🖼️🌆 🖼️🏔️
Единый размер: [100x150] для всех!

Теперь все изображения помещены в рамки одного размера, что иллюстрирует возможности CSS по созданию единообразия размеров.

Расширение понимания единообразия

Центрирование изображений внутри контейнеров

Для центрирования более маленьких изображений в рамках предоставленного пространства используйте следующий подход:

.img-center {
  position: relative;
  overflow: hidden; /* ограничиваем изображение рамками контейнера */
}

.img-center img {
  position: absolute;
  top: 50%; /* выравниваем по центру... */
  left: 50%; /* ...гарантируем центрирование */
  transform: translate(-50%, -50%); /* регулируем позицию */
}

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

Рассмотрение значимости содержимого

Использование 'object-fit: cover' может привести к обрезке важных деталей изображения. Чтобы избежать усечения ключевых элементов, следует:

• Оценить повествовательную роль изображения
• Убедиться, что основные элементы хорошо видны
• В случае необходимости выбирать object-fit: contain, чтобы изображение было полностью видно

Альтернативы для object-fit

Некоторые браузеры могут не поддерживать object-fit. Для таких случаев планируйте алтернативные варианты:

.img-legacy {
  width: 150px;   /* устанавливаем приемлемую ширину */
  height: auto;   /* высота подбирается автоматически */
}

Используйте директивы @supports, применяющие object-fit, где это возможно:

@supports (object-fit: cover) {
  .img-legacy {
    object-fit: cover; /* "Активируй, если поддерживаешь!" */
  }
}

Создание привлекательного визуального ряда изображений

Стремитесь к следующим целям:

• Визуализируйте согласованный и цельный контент
• Гарантируйте ясность ключевых деталей
• Поддерживайте сбалансированный и эстетически приятный дизайн

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

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

1. Aspect Ratio Boxes | CSS-Tricks — Понимание соотношений сторон для сохранения формы изображений.
2. object-fit – CSS: Cascading Style Sheets | MDN — Мастер-класс по управлению размерами изображений с CSS object-fit.
3. Responsive Images Done Right: A Guide To <picture> and srcset — Smashing Magazine — Полезные рекомендации по созданию адаптивных изображений.
4. A Complete Guide to Flexbox | CSS-Tricks — Все об использовании модели CSS Flexbox для выравнивания изображений.
5. CSS – Grid Layout — Как CSS Grid помогает создать адаптивные галереи изображений.
6. How To Create an Image Gallery — Пошаговое руководство по созданию галереи изображений.
7. Responsive Web Design Images — Адаптивные изображения как инструмент в дизайне веб-страниц.