Как сделать изображение на полный экран?

Как сделать изображение на полный экран? - коротко

Для вывода изображения на весь экран задайте элементу  стили width:100vw; height:100vh; object-fit:cover; или поместите его в контейнер с такими параметрами и включите режим fullscreen через element.requestFullscreen().

Как сделать изображение на полный экран? - развернуто

Для того чтобы изображение покрывало весь экран, следует задать ему размеры, равные размерам окна браузера, и удалить любые отступы, которые могут помешать этому. В большинстве случаев достаточно воспользоваться CSS‑правилами, но иногда понадобится небольшая корректировка JavaScript, особенно если требуется динамическое реагирование на изменение размеров окна.

Во-первых, в HTML‑разметке помещаем изображение в отдельный контейнер, например, в тег <div> с классом fullscreen. Это упрощает управление стилями и предотвращает влияние внешних элементов.

<div class="fullscreen">
 <img src="example.jpg" alt="Пример изображения">
</div>

Далее задаём стили:

html, body {
 margin: 0;
 height: 100%;
 overflow: hidden; /* отключаем прокрутку, чтобы не появлялись полосы */
}
.fullscreen {
 position: fixed; /* фиксируем элемент относительно окна */
 top: 0;
 left: 0;
 width: 100vw; /* 100 % ширины видимой части окна */
 height: 100vh; /* 100 % высоты видимой части окна */
 display: flex;
 justify-content: center;
 align-items: center;
 background: #000; /* фон, который будет виден, если изображение имеет прозрачные области */
}
.fullscreen img {
 max-width: 100%;
 max-height: 100%;
 object-fit: cover; /* изображение заполняет контейнер, сохраняя соотношение сторон */
}

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

Для браузеров, которые могут менять размеры окна (например, при изменении ориентации на мобильных устройствах), полезно добавить небольшую JavaScript‑поддержку, которая будет обновлять размеры контейнера в реальном времени:

function setFullScreen() {
 const el = document.querySelector('.fullscreen');
 el.style.width = `${window.innerWidth}px`;
 el.style.height = `${window.innerHeight}px`;
}
window.addEventListener('resize', setFullScreen);
window.addEventListener('load', setFullScreen);

Эта функция гарантирует, что даже при изменении размеров окна элемент мгновенно адаптируется к новым параметрам.

Если речь идёт о мобильных приложениях, то в Android‑проекте достаточно задать в манифесте атрибут android:theme="@style/Theme.NoActionBar.FullScreen" и установить изображение в ImageView с параметрами android:layout_width="match_parent" и android:layout_height="match_parent". В iOS‑приложениях следует использовать UIImageView с констрейнтами, привязанными к краям superview, и установить contentMode = .scaleAspectFill.

Подводя итог, процесс состоит из трёх ключевых шагов:

1. Обеспечить отсутствие внешних отступов и скрыть прокрутку.
2. Задать контейнеру фиксированное позиционирование и размеры, равные размерам окна.
3. Применить к изображению свойства, позволяющие заполнить контейнер полностью, сохраняя или игнорируя соотношение сторон в зависимости от задачи.

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