Как заполнить картинкой весь блок css
Перейти к содержимому

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

  • автор:

Как заполнить блок картинкой без background?

Есть к примеру квадратный блок: 500px на 500px и картинка: 300px на 100px.
У картинки будет width: 100% но нельзя использовать height: 100%.

Как растянуть картинку так, чтобы заполнить полностью блок?

p.s использовать background нельзя.

Вот небольшой пример)

IXhWoxK.png

  • Вопрос задан более трёх лет назад
  • 1131 просмотр

3 комментария

Простой 3 комментария

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

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

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

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

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

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

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

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

object-fit: inherit — значение принимается от родительского элемента

Результат использования свойства object-fit выглядит так:

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

блоки с img

2ое изображение не заполняет блок. Как это сделать?

.photos__img < width: 100%; >.photos__content < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); text-align: center; padding-top: 1%; opacity: 0; transition: all .25s; &: hover < opacity: 1; padding-top: 5%; >> .photos__item < padding: 0; >.photos__btn, .photos__desc < color: #fff; >.photos__content .photos__btn

 

title

photos__desc

title

photos__desc

Отслеживать
1,640 14 14 серебряных знаков 20 20 бронзовых знаков
задан 21 янв 2017 в 12:58
1,698 2 2 золотых знака 20 20 серебряных знаков 59 59 бронзовых знаков
в смысле растянуть?
21 янв 2017 в 13:03

@Isaev не. нужно чтобы изображение влезло в блок,можно его даже увеличить,чтобы не было белой полосы снизу. Но не растягивайте, пропорции должны быть сохранены

21 янв 2017 в 13:10
@StepanIvanov, вставьте изображения фоном блока и задайте размер background-size: cover;
21 янв 2017 в 13:15

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Все просто: Замените картинку

 
.you_img_1

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

Отслеживать
ответ дан 21 янв 2017 в 13:18
Vlad Starkovsky Vlad Starkovsky
165 7 7 бронзовых знаков

да это как один из вариантов. Но допустим если будет 100 изображений, то для них нужно будет 100 классов писать?

21 янв 2017 в 13:52

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

div < width: 400px; height: 400px; border: 1px solid; >.photos__item
 

Отслеживать
ответ дан 21 янв 2017 в 14:10
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 62 62 бронзовых знака

Можете, пожалуйста, добавить запускаемый пример? И желательно добавить, что это свойство object-fit не поддерживается IE.

21 янв 2017 в 18:46
добавил запускаемый пример
22 янв 2017 в 19:07

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

.full_bg

Отслеживать
ответ дан 21 янв 2017 в 13:59
Vlad Starkovsky Vlad Starkovsky
165 7 7 бронзовых знаков

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

.photos < display: flex; width: 100%; >.photos__img < /* Эти стили для фото */ position: absolute; top: 0; height: 100%; transform: translateX(calc((100% - 140px) / -2)); /* Это что бы картинка отображалась по середине */ >.photos__content < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); text-align: center; padding-top: 1%; opacity: 0; transition: all .25s; &: hover < opacity: 1; padding-top: 5%; >> .photos__item < position: relative; /* Добавить это */ padding: 0; width: 140px; height: 100px; margin: 0 3px; overflow: hidden; /* Это */ >.photos__btn, .photos__desc < color: #fff; >.photos__content .photos__btn

 

title

photos__desc

title

photos__desc

Как растянуть картинку на весь экран css?

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

img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту картинки равными 100%, что означает, что она будет занимать всю доступную ширину и высоту родительского элемента.

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

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.

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

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: auto; object-fit: cover; > 

Этот код устанавливает атрибут object-fit равным cover , что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.

Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit . Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.

10 октября 2022

Лучший способ растянуть изображение — это использовать свойство CSS3 background . Вот пример, который использует фоновое изображение для body страницы, рисунок всегда растянется и заполнит весь экран.

body /* задаёт путь до файла */ background-image: url("path_to_my_image.jpg"); /* задает стартовое положение изображения на странице */ background-position: center center; /* определяет размер изображения на странице */ background-size: cover; /* свойство устанавливает, будет ли повторяться изображение и каким образом */ background-repeat: no-repeat; /* cвойство определяет, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным */ background-attachment: fixed; /* возможна также и короткая запись данных свойств */ // background: url("path_to_my_image.jpg") center center no-repeat fixed; // background-size: cover; > 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *