Как заполнить картинкой весь блок css

Картинка по размеру блока

Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:

object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)

object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.

object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.

object-fit: none — картинка отображается в своём реальном масштабе

object-fit: scale-down — соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.

object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение

Как полностью заполнить блок изображением?

На момент публикации ответа, свойство не поддерживается браузерами ИЕ и Эдж, для Оперы мини необходимо использовать префикс -o- . Покрытие рынка браузеров — 79,1%.

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

Если вам нужно именно img , то можно для картинки сделать position: absolute и дальше играться:

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.3.43278

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как использовать object-fit и background-size в CSS

Мы не всегда можем предоставить для HTML элемента изображение нужного размера. Если же мы используем контейнер с шириной и высотой, которые не пропорциональны соотношению сторон изображения, то изображение будет либо сжато, либо растянуто. Это выглядит нехорошо, однако решить эту проблему можно либо применив свойство object-fit к элементу img , либо с помощью свойства background-size .

Для начала давайте определимся с проблемой. Посмотрите на следующий рисунок:

Нормальное изображение, которое сжимается при использовании в HTML компоненте.

Почему это происходит?

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

Мы видим это на следующем рисунке:

Соотношение сторон изображения отличается от размеров содержащего ее элемента, и изображение выводится растянутым.

Решение проблемы

Нам не всегда нужно добавлять изображение другого размера, если соотношение сторон изображения не совпадает с шириной и высотой контейнера. Прежде чем погрузиться в CSS-решения, мы хотим показать вам, как мы делали это в приложениях для редактирования изображений:

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

Теперь, когда мы понимаем, как это работает, давайте разберемся, как это работает в браузере.

CSS свойство object-fit

Свойство object-fit определяет, как должен измениться размер содержимого заменяемого элемента, например, img или video , чтобы подстроиться под контейнер. По умолчанию object-fit имеет значение fill , что может привести к сжиманию или растягиванию изображения.

Давайте рассмотрим возможные значения.

object-fit: contain

В этом случае размер изображения будет изменен в соответствии с соотношением сторон контейнера. Если соотношение сторон изображения не совпадает с соотношением сторон контейнера, то оно будет дополнено черными каше.

При использовании object-fit: contain изображение будет либо подогнано под размеры контейнера, либо дополнено черными полосами (каше).

object-fit: cover

В этом случае размер изображения также будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет обрезано по размеру.

При использовании object-fit: cover изображение будет либо подогнано под размеры контейнера, либо обрезано.

object-fit: fill

При этом значении размер изображения будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет либо сжато, либо растянуто. Но мы этого не хотим.

При использовании object-fit: fill изображение будет либо подогнано под размеры контейнера, либо сжато/растянуто.

object-fit: none

В этом случае размер изображения вообще не будет изменен, ни растянут, ни сжат. Это значение работает так же, как значение cover , но при этом не учитывается соотношение сторон контейнера.

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

Кроме свойства object-fit , еще есть свойство object-position , которое отвечает за положение изображения внутри контейнера.

Возможные значения свойства object-position

Свойство object-position работает аналогично свойству CSS background-position :

В большинстве случаев используется значение по умолчанию (т. е. "center" или "50% 50%").

Ключевые слова top и bottom также работают, когда соотношение сторон контейнера по вертикали больше:

Сравнение object-position: top (слева) и object-position: bottom (справа).

Свойство background-size

Основное отличие свойства background-size заключается в том, что мы имеем дело с фоном, а не с HTML элементом ( img ).

Возможные значения background-size

Свойство background-size может принимать значения auto , contain и cover .

background-size: auto

При значении auto изображение сохраняет свой оригинальный размер:

Следует помнить, что размер по умолчанию может привести к размытому изображению (если он слишком маленький).

background-size: cover

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

При использовании background-size: cover обязательно учитывайте соотношение сторон изображения.

background-size: contain

В этом случае размер изображения будет изменен таким образом, чтобы оно помещалось в контейнер. Если соотношение сторон не совпадает, то изображение будет дополнено черными полосами (каше), как показано в следующем примере:

background-size: contain изменяет размер изображение, чтобы оно поместилось в контейнер.

Что касается background-position , то оно работает также, как object-position . Единственное отличие состоит в том, что позиция по умолчанию object-position отличается от позиции по умолчанию background-position .

Когда не следует использовать object-fit или background-size

Если элементу или изображению задана фиксированная высота и установлено свойство background-size: cover или object-fit: cover , то появится момент, когда изображение станет слишком широким, что приведет к потере важных деталей, которые могут повлиять на восприятие изображения пользователем.

Рассмотрим следующий пример, в котором изображению задана фиксированная высота:

Изображение справа слишком растянуто в ширину из-за фиксированной высоты и слишком широкого контейнера.

Если контейнер слишком широк, это приведет к результату, который мы видим на рисунке справа (изображение слишком широкое). Это происходит потому, что мы не задаем соотношение сторон.

Решить эту проблему можно только двумя способами. Первый — это использовать трюк под названием «padding hack», чтобы создать внутреннее соотношение сторон.

Второй способ это использовать новое CSS свойство aspect-ratio :

Случаи использования и примеры

Аватары пользователей

Идеальный вариант использования object-fit: cover — это аватары пользователей. Обычно соотношение сторон, допустимое для аватара, квадратное. Размещение изображения в квадратном контейнере может исказить изображение.

Аватар пользователя без object-fit и с object-fit: cover

Список логотипов

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

К счастью, для этого отлично подходит object-fit: contain .

Использование object-fit: contain поможет подогнать под один размер логотипы клиентов не искажая их.

Миниатюра для статьи

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

Настройка миниатюры статьи при помощи object-fit: cover.

Задний фон заголовка статьи

В этом случае решение о том, использовать элемент img или фон CSS будет зависеть от следующего:

• Имеет ли изображение важное значение? Если CSS по какой-то причине будет отключен, хотим ли мы, чтобы пользователь видел изображение?
• Или же у изображения просто декоративное назначение?

Основываясь на ответе на эти вопросы, мы можем решить, какой способ использовать. Если изображение важно:

Давайте предположим, что изображение важно, потому что это веб-сайт, связанный с едой.

Если изображение имеет чисто декоративную функцию, то мы можем использовать свойство background-image :

В этом случае код CSS будет короче. Стоит убедиться, что весь текст, отображаемый поверх изображения, хорошо виден.

Добавление фона к изображению при помощи object-fit: contain

А вы знаете, что вы можете добавить цвет фона для img ? Это еще один плюс при использовании object-fit: contain .

В приведенном ниже примере у нас есть сетка изображений. Если соотношение сторон изображения и контейнера отличается, появится цвет фона.

Можно использовать object-fit: contain, чтобы добавить фоновый цвет изображению.

Видеоэлемент

Требовалось ли вам когда-нибудь установить видео в качестве фона? Если да, то вы, вероятно, хотели бы, чтобы оно занимало бы всю ширину и высоту родительского элемента.

У элемента video по умолчанию стоит значение object-fit: contain. Как видно на рисунке, в этом случае видео не заполняет полностью фон, даже если у него заданы свойства position: absolute, width: 100% и height: 100%.

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

Заключение

Как вы, наверное, убедились, свойства object-fit и background-size очень полезны для обработки изображений с различными соотношениями сторон. Мы не всегда можем контролировать настройку идеальных размеров для каждого изображения, и именно здесь эти два CSS свойства незаменимы.

И еще стоит дружески напомнить о выборе между элементом img и фоном CSS: Если изображение является чисто декоративным, выбирайте фон CSS. В противном случае более подходит элемент img .

Надеемся, что данная статья была вам полезна. Спасибо, что дочитали ее до конца.

Как в CSS вписать картинку (именно img) в блок?

Многие для вписывания картинки в блок используют background-image. Но есть один метод, который безболезненно и (почти) на всех браузерах поможет вам без лишних заморочек вписать img в div.

Делается этот хитрый трюк через padding-top и абсолютное позиционирование. Родительскому элементу указываем:

1. height: 0;
2. padding-top: 130%;
3. position: relative;
4. display: block;

1. position: absolute;
2. top: 50%;
3. left: 50%;
4. transform: translate(-50%, -50%);
5. max-height: 100%;
6. max-width: 100%;

В итоге картинка вытягивается по блоку с 0 высотой, а также изменяя padding-top (на 100% картинка вписывается в квадрат) мы можем изменять фигуру вписывания. А также можем через object-fit: cover сделать картинку замещаемой (но для ie11 нужно использовать полифил).

Результат на CodePen (правда там результат с object-fit: cover, но обратно превратить результат в вмещаемую картинку проще).