Установка размера изображения в CSS без растягивания

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

Для предотвращения деформации изображения при изменении его размеров в CSS используйте свойство object-fit: contain вместе с определёнными значениями width и height:

.responsive-image {
  width: 200px; /* Задайте необходимую ширину */
  height: 150px; /* Задайте требуемую высоту */
  object-fit: contain; /* Позволит сохранять пропорции, предотвращая искажение */
}

Далее, назначьте класс изображению в HTML:

<img src="image.jpg" class="responsive-image" alt="описание изображения">

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

Использование object-fit

Свойство object-fit – это ценный инструмент для поддержания пропорций изображения. Задав object-fit: contain, вы гарантируете, что изображение полностью поместится внутри заданной области. Если же вам требуется, чтобы изображение полностью заняло контейнер, даже с возможным обрезанием краёв, используйте object-fit: cover.

Обертывание изображения в div

Одним из ключевых приёмов является оборачивание изображений в div. Это обеспечивает более точный контроль над их размерами и пропорциями.

<div class="image-container">
  <img src="image.jpg" alt="описание изображения"> <!-- Image in place -->
</div>

.image-container {
  width: 200px; /* Определите границы для изображения */
  height: 150px; /* Ставим высоту */
  overflow: hidden; /* Скрываем избыточное */
}

.image-container img {
  width: 100%; /* Растянуть на весь контейнер */
  height: auto;
  object-fit: cover; /* Важно понимать разницу между "contain" и "cover" */
}

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

Позиционирование с помощью object-position

Применение свойства object-position позволяет более детально регулировать расположение изображения внутри его контейнера:

.responsive-image {
  object-fit: contain;
  object-position: center; // Центрирование – залог гармоничности
}

Адаптивность

Свойства max-width и height: auto делают адаптивную верстку надёжной и гибкой, позволяя изображению корректно отображаться на устройствах с разными разрешениями экрана.

Особенности SVG

SVG-изображения с атрибутом preserveAspectRatio могут быть особенно полезны в адаптивном дизайне. SVG легко приспосабливается к размерам контейнера, а preserveAspectRatio позволяет сохранять пропорции.

Совместимость превыше всего

Важно обращать внимание на совместимость свойства object-fit с различными браузерами. Платформы, как caniuse.com, предоставляют актуальную информацию о поддержке разных браузерами. Для улучшения совместимости может потребоваться использование браузерных префиксов, таких как -o-object-fit: contain для Opera.

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

Визуализируем концепцию изменения размера:

Ваше изображение – это рамка 🖼️:

| Ситуация                 | Визуальный пример         |
| -----------------------   | -----------------         |
| Исходное изображение      | 🖼️                       |
| Деформированное изображение | 🗻 (горы)                 |
| Корректный размер         | 🖼️ (идеально подходит в рамку)      |

Ключ к успеху: 🖼️ остаётся без изменений, 🗻 – уже искажение.

Настройте CSS так, как если бы подгоняли картину под рамку:

Для оптимального отображения (👍):

.img-frame {
  height: auto;
  max-width: 100%;
}

Избегайте таких стилей, чтобы не было деформации (👎):

.img-stretch {
  width: 500px;
  height: 200px;
}

Совет: max-width: 100%; и height: auto; – ваши спутники в поддержании пропорций! 🖼️👌

Улучшение пользовательского опыта

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

• Используйте background-size для фоновых изображений, чтобы контролировать их пропорции:

.background-img {
  background-image: url('image.jpg'); // Красивый фон гарантирован!
  background-size: contain; /* или cover */
  background-repeat: no-repeat; // Дублирование уместно только в случае с пиццей!
}

• Используйте тег <picture> с несколькими источниками изображений, чтобы оптимизировать их загрузку и отображение на разных устройствах:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg"> // Для больших экранов
  <source media="(min-width: 450px)" srcset="medium-image.jpg"> // Средний размер для менее мощных устройств
  <img src="small-image.jpg" alt="описание изображения">  // Маленькое изображение для малых экранов
</picture>

• Используйте атрибут loading в элементе <img> для реализации "ленивой" загрузки и ускорения работы страницы:

<img src="image.jpg" loading="lazy" alt="описание изображения"> // Изображение "отдохнёт", пока его загрузка действительно не станет нужна

Решение возможных проблем

Будьте внимательны и готовы решить возникшие проблемы:

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

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

1. object-fit | CSS-Tricks
2. object-fit – CSS: Cascading Style Sheets | MDN
3. CSS object-fit Property | W3Schools
4. Настраивать высоту и ширину изображений снова стало важно — Smashing Magazine
5. Недавние вопросы по 'object-fit' – Stack Overflow
6. Создание пропорциональных соотношений для видео – A List Apart
7. <image> | Codrops