Растянуть картинку на весь блок
Чтобы растянуть картинку на весь блок, надо указать свойство background-size: cover .
.bg < background: url(image.jpg) no-repeat; background-size: cover; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вставить картинку
- Градиент
- 4 видов границ (border)
- 4 видов тени
- Спрайт
- Сделать картинку чёрно-белой
- Растянуть картинку на весь блок
- Несколько картинок на фоне
- Изменить прозрачность объекта
Картинка по размеру блока
Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в 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 выглядит так:
Как растянуть фон, изображение на всю ширину блока, экрана
Когда-то искал способ, как растянуть фон блока или всего сайта на всю ширину и высоту. Причем сделать это так, чтобы происходило автоматическое масштабирование фона. То есть, не просто растянуть и потерять пропорции изображения, а чтобы все выглядело правильно без искажения.
Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.
Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.
Способ №1
Первый способ использует чистый CSS3. Все получается благодаря свойству background-size. В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body. Вы можете применить по надобности к блоку например.
Растягивать на весь экран будем вот эту картинку с милой девушкой ��
В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:
body < background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; >
Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed, которое фиксирует изображение.
Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.
Способ №2
Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id — bg:
И прописываем стили:
Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто :).
Способ №3
Тут применяется jQuery. Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.
После библиотеки подключаем скрипт, который и будет масштабировать наш фон
Далее уже как и во втором способе, в теле сайта выводим картинку и присваиваем ей id, например bg.
#bg < position: fixed; top: 0; left: 0;z-index: -1; >.bgwidth < width: 100%; >.bgheight
По стилям видно, что мы добавили позиционирование. В данном случаи это fixed. Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute, то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.
Также указан параметр — z-index: -1, для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.
Какой способ использовать, решать Вам. Как и писал Выше, мне более близок первый способ. Он самый простой и не хуже других.
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
Как img во весь div?
есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img
зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.
благодарю и буду рад если поможете.
- Вопрос задан более трёх лет назад
- 91373 просмотра