Растягиваем background-изображение в div с CSS без повтора

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

Чтобы корректировать размеры фонового изображения в элементе div средствами CSS, используйте свойство background-size. Опция cover позволит заполнить весь div изображением, а contain расположит его так, чтобы оно полностью поместилось внутри div, не обрезаясь. Чтобы предотвратить повторение изображения, присвойте background-repeat значение no-repeat и центрируйте изображение с помощью background-position: center.

.div-bg {
  background: url('image.jpg') no-repeat center center / cover;
}

Примените данный CSS к вашему div:

<div class="div-bg"></div>

Таким образом, вы обеспечите корректное отображение фонового изображения.

Метод растягивания изображения на весь div

Если необходимо растянуть изображение на всем пространстве div, можно использовать процентное значение 100% 100%. Однако данный метод может привести к искажению изображения, поэтому он применяется не так часто:

.stretched-bg {
  background-size: 100% 100%; /* Возможно искажение изображения */
}

Использование object-fit для тегов img

Используйте свойство object-fit для элементов <img>, чтобы управлять размерами и заполнением контейнера:

.img-fit {
  object-fit: cover; /* Или contain, аналогично свойству background-size */
}

Обратите внимание, что object-fit не поддерживается браузером IE.

Медиазапросы для адаптивного дизайна

Применение медиазапросов позволяет адаптировать изображения под размер экрана и обеспечить удобное отображение на различных устройствах:

@media (max-width: 768px) {
  .div-bg {
    background-size: contain; /* Предотвращаем излишнее увеличение изображений на мобильных устройствах */
  }
}

Визуальные эффекты

Восприятие изображения заметно изменяется в зависимости от значения background-size:

• Contain: Вся картинка помещается внутри, но могут появиться незаполненные области.
• Cover: div заполняется целиком, но изображение может обрезаться.
• 100% 100%: Полное заполнение, но возможны искажения.

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

Представим фоторамку 🖼️ с разными пейзажными фотографиями 🏞️:

.frame {
  /* Ваш div — это ваша рамка. Установите свои условия */
  width: 100px;  /* Ширина рамки — как глубина вашего терпения */
  height: 100px; /* Высота рамки — как высота ваших амбиций */
  background: url('landscape.jpg'); /* Выберите пейзаж */
  background-size: cover;  /* Изображение плавно заполняет рамку */
  background-position: center; /* Акцент на центре */
}

С опцией background-size: cover; изображение растягивается до полного заполнения рамки:

До: 🖼️🏞️ (Изображение ищет себе место)
После: 🖼️[🏞️] (Изображение идеально вписывается в рамку)

Ваш Viewport — это стена, на которой висит ваша рамка, всегда сочетающаяся с интерьером!

Кросс-браузерная поддержка с помощью jQuery

Чтобы обеспечить совместимость с различными браузерами, можно использовать библиотеку jQuery:

$(window).resize(function() {
  $('.div-bg').css('background-size', window.innerWidth > window.innerHeight ? 'cover' : 'contain'); /* Мы учитываем особенности каждого устройства */
});

При возможности давайте предпочтение чистому CSS, но JavaScript может стать хорошим альтернативным решением.

Практические примеры в real-time

Codepen — прекрасная платформа для экспериментов с background-size:

Посмотреть демонстрацию на Codepen

Проведение тестов помогает наглядно увидеть разницу и лучше понять принципы работы.

Подготовка к разнообразным случаям

Вы можете столкнуться с некоторыми сложностями:

• Адаптивный дизайн: Используйте picture или source с медиа-атрибутами для выбора разных изображений на разных брейкпоинтах.
• Наборы изображений: srcset и sizes помогут задать отдельные варианты изображений в зависимости от устройства.
• Векторные изображения: Для логотипов и иконок предпочтительнее использовать SVG из-за его масштабируемости и малого размера.

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

1. Свойство background-size в CSS — Детальное описание свойств для размеров фоновых изображений.
2. Единицы измерения в CSS | CSS-Tricks — Все подробности о CSS-единицах для масштабирования.
3. Совершенное фоновое изображение на весь экран | CSS-Tricks — Как создать идеальное фоновое изображение на весь экран.
4. Сохранение пропорций блоков | CSS-Tricks — Руководство по поддержанию соотношения сторон для адаптивных блоков.
5. background-image – CSS: Каскадные таблицы стилей | MDN — Детальное описание использования свойства background-image.
6. Адаптивный дизайн — Обучение веб-разработке | MDN — Тщательный разбор принципов адаптивного дизайна.
7. Свойство background-repeat в CSS — Все о настройках повторения фоновых изображений.
8. Полное руководство по Flexbox | CSS-Tricks — Ключ к освоению Flexbox для работы с изображениями и не только.