Как полностью заполнить блок изображением?
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 золотых знака 18 18 серебряных знаков 55 55 бронзовых знаков
в смысле растянуть?
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
157 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 серебряных знака 61 61 бронзовый знак
Можете, пожалуйста, добавить запускаемый пример? И желательно добавить, что это свойство object-fit не поддерживается IE.
21 янв 2017 в 18:46
добавил запускаемый пример
22 янв 2017 в 19:07
Если у вас очень много изображений, а их вывод происходит путем какого либо серверного языка, то можно поступить еще иначе
.full_bg
Отслеживать
ответ дан 21 янв 2017 в 13:59
Vlad Starkovsky Vlad Starkovsky
157 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 есть свойство 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 выглядит так:
Как растянуть картинку на весь экран 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; > Как заполнить блок картинкой без background?
Есть к примеру квадратный блок: 500px на 500px и картинка: 300px на 100px.
У картинки будет width: 100% но нельзя использовать height: 100%.
Как растянуть картинку так, чтобы заполнить полностью блок?
p.s использовать background нельзя.
Вот небольшой пример)
- Вопрос задан более трёх лет назад
- 1072 просмотра
3 комментария
Простой 3 комментария