Как растянуть картинку на весь экран?
Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо.
2 мар 2016 в 7:27
Спасибо большое! Очень помогло
22 мая 2020 в 10:43
Отслеживать
ответ дан 2 апр 2012 в 14:58
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 21 21 бронзовый знак
не сработает если реальная ширина картинки будет меньше ширины окна браузера.
2 апр 2012 в 15:09
Важно не забывать кавычки ставить: background: url(«img/image.jpg») , иначе на экранах с некоторым разрешением внизу может появляться «полоса»— опускается самая верхняя часть фоновой картинки.
Отслеживать
ответ дан 19 фев 2016 в 11:18
Саша Черных Саша Черных
4,314 14 14 золотых знаков 43 43 серебряных знака 94 94 бронзовых знака
Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно no-repeat
19 фев 2016 в 11:27
@soledar10, да, ибо таким образом лично разрешил проблему на своём сайте. Раньше нижняя часть его страниц выглядела на моём мониторе так: !1 !2 Если надо, могу html-страницы скинуть, проверьте на Screenfly с кавычками и без. Спасибо.
19 фев 2016 в 13:45
jsfiddle.net/soledar10/vLvrzh2x без разницы есть кавычки или нет
20 фев 2016 в 8:10
@soledar10, если изображение по ссылке, тоже не вижу изменений. Но если лежит в папке, похоже, кавычки приобретают значение: Отображение с кавычками / Отображение без кавычек / Код с кавычками / Код без кавычек / Спасибо.
20 фев 2016 в 12:51
Дело в том, что пробел не должен содержаться в адресе. Если он там есть, то помогает одно из следующих решений: 1. Честно заменить пробел на %20 . 2. Написать адрес в кавычках. 3. Экранировать пробел \ . В приведённых примерах фон с пробелом без кавычек вычёркивает всё css-свойство включая no-repeat center center fixed , однако, за счёт того, что у body есть устаревший атрибут background с той же картинкой, он всё же отображается. На самом деле, в нормальной ситуации фона в таком случае вообще не окажется.
1 мар 2016 в 16:14
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Как сделать картинку во весь экран html
Для того чтобы отобразить картинку на весь экран можно воспользоваться следующими примерами.
Вариант №1. Используем свойство background-image на блочном элементе, например на .
Исходный HTML документ
class="box">
.box /* указываем ссылку до файла */ background-image: url(./test.jpg); /* определяем формат отображения */ background-size: cover; /* если блоку не задать высоту, то контент не отобразится */ height: 100vh; >
Вариант №2. Используем тэг ![]()
.
Исходный HTML документ
src="./test.jpg" alt="">
img /* Используем высоту и ширину окна браузера */ width: 100vw; height: 100vh; >
Как растянуть картинку на весь экран 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-image на весь экран, при условии того, что будет видна вся картинка?
Пробовал разные свойства, но выходит так, что background-image все равно не растягивается должным образом. Нужно, чтобы задний фон покрывал всю страницу сайта, при этом картинка отображалась на 100%, background-image: cover не помогло
- Вопрос задан более трёх лет назад
- 27734 просмотра
Комментировать
Решения вопроса 1
Тыжпрограммист
background: url(image/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
Ответ написан более трёх лет назад
Нравится 2 8 комментариев
и без префиксов достаточно
Ярослав Иванов @space2pacman Куратор тега CSS
Арман Дендибаев: В чем разница между -webkit- и -o- ?
Ярослав Иванов: Этот код не мой и старый я иногда юзаю этот метод
Ankhena @Ankhena Куратор тега CSS
Ярослав Иванов: webkit для webkit браузеров, -o- для старой оперы
Сергей delphinpro @delphinpro Куратор тега CSS
Этот код не мой и старый я иногда юзаю этот метод ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.
moneymakerXA @moneymakerXA Автор вопроса
Арман Дендибаев: Да, отлично, спасибо большое
Stanislav Yaroslavtsev @Stas_Yaroslavtsev
Не работает (
Ответы на вопрос 1
Знаю php, js, html, css
Вы скажите точнее, как нужно. У меня 3 варианта:
1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример
2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример
3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример