Как сделать картинку на весь экран

 class="box">

.box  /* указываем ссылку до файла */ background-image: url(./test.jpg); /* определяем формат отображения */ background-size: cover; /* если блоку не задать высоту, то контент не отобразится */ height: 100vh; > 

Вариант №2. Используем тэг .

Исходный HTML документ

 src="./test.jpg" alt=""> 

img  /* Используем высоту и ширину окна браузера */ width: 100vw; height: 100vh; > 

Как растянуть картинку на весь размер экрана

Ничего на эту тему не нашел. Мне нужно что бы картинка не просто увеличивалась, теряя свою часть за границей экрана, а именно расстягивалась на всю ширину и высоту, игнорируя пропорции. Пытался background:url(am.jpg) no-repeat center center fixed; , не работает так как мне надо

Отслеживать
задан 27 дек 2020 в 22:03
54 6 6 бронзовых знаков

на всю высоту и ширину это значит терять пропорции в большинстве случаев. вам там на выбор background-size: cover/contain

27 дек 2020 в 22:11
Такой вариант не получается, картинка все равно сохраняет пропорции
27 дек 2020 в 23:24

сеачало надо указать размер html,body то есть height: 100% потом писать уже background url и background size

Как растянуть картинку на весь экран 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; > 

как можно сделать картинку в ноутбуке на весь экран, когда уменьшаешь разрешение?

если вы имеете в виду обои рабочего стола, то там(свойства рабочего стола — вкладка рабочий стол) есть выпадающий список. нужно выбрать растянуть.

Остальные ответы

очень просто — Свойства Рабочий стол — потом растянуть или Замостить, что больше по душе

Свойства —Рабочий стол —-Расположение : Растянуть

А где эти свойства?

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.