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

Настройка полного экрана на компьютере с Windows

Вариант 1: Настройка полного экрана операционной системы

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

Способ 1: Изменение разрешения

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

Подробнее: Как изменить разрешение экрана в Windows 10 / 7

Внимание! Предоставляемые руководства подойдут и для восьмой версии операционной системы от Microsoft.

Способ 2: Установка драйвера видеокарты

Разрешение экрана может измениться по причине выхода из строя драйвера видеокарты или его отсутствия. Наиболее часто эта проблема встречается после переустановки Windows 7. Весь процесс инсталляции нужного программного обеспечения описан в соответствующей статье на нашем сайте.

Способ 3: Настройка второго монитора

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

Подробнее: Подключение и настройка двух мониторов в Windows 10 / 7

Важно! Представленные рекомендации одинаково подходят и для других версий операционной системы от Microsoft.

Способ 4: Авторегулировка монитора

Во время эксплуатации компьютера настройки монитора могут сбиться, из-за чего изображение будет отображаться некорректно: быть размытым, выходить за границы матрицы и тому подобное. Многие модели дисплеев имеют опцию авторегулировки. Для ее активации потребуется нажать соответствующую кнопку на одной из граней устройства. Зачастую она подписана словом «AUTO».

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

Вариант 2: Запуск игры на весь экран

Если изображение имеет несоответствующее разрешение после запуска игры, вносить изменения необходимо в параметры системы, связанные с видеокартой, или корректировать настройки самой программы.

Способ 1: Горячие клавиши

Когда программа запускается не на весь экран, а отображается в оконном режиме, исправить ситуацию можно посредством нажатия горячих клавиш Alt + Enter. Эта комбинация работает не всегда, так как некоторые игры имеют ограничения, блокирующие работу хоткеев.

Обратите внимание! Повторное нажатие Alt + Enter приведет к тому, что игра снова вернется в оконный режим отображения.

Способ 2: Ввод дополнительных параметров запуска

Открыть игру в полноэкранном режиме можно принудительно, задав параметры запуска в свойствах ярлыка. Для этого необходимо использовать переменную «-fullscreen» (без кавычек) и вручную ввести ширину и высоту в пикселях с помощью аргументов «-w» и «-h» (без кавычек). Пошаговое руководство:

1. Раскройте контекстное меню ярлыка, кликнув по нему правой кнопкой мыши. Выберите пункт «Свойства». Если на рабочем столе нет значка игры, его предварительно нужно создать. Этому посвящена отдельная статья другого автора, с которой можно ознакомиться, перейдя по ссылке ниже. Подробнее: Создаем ярлыки на рабочем столе Windows
2. В поле «Объект» в самом конце после закрывающих кавычек впишите параметры «-fullscreen -w XXXX -h YYYY» (без кавычек), где XXXX — это ширина монитора в пикселях, а YYYY — высота. Если эти значения неизвестны, можете ознакомиться со статьей на нашем сайте, в которой описаны способы, как можно узнать разрешение экрана. Подробнее: Как узнать разрешение экрана в Windows 10 / 7
3. Сохраните внесенные изменения, нажав по кнопке «Применить», а затем «ОК».

Если игра запускается через Steam, ярлыка на рабочем столе не будет. Потребуется вводить такие же параметры запуска непосредственно в клиенте. Предварительно рекомендуется ознакомиться с другой статьей, в которой описывается, как открыть нужное меню для ввода значений.

Способ 3: Изменение графических настроек игры

Если запускаемая игра открывается в оконном режиме, а применение ранее описанных горячих клавиш Alt + Enter не помогает развернуть ее на весь экран, исправить ситуацию можно путем изменения настроек непосредственно приложения.

Важно! Представленная далее инструкция не является универсальной, так как каждая игра имеет уникальный графический интерфейс. Некоторые пункты меню, их отображение и месторасположение может отличаться.

В качестве примера будет рассмотрена игра ATOM RPG. Изменение разрешения в ней производится следующим образом:

Находясь в главном меню, перейдите в настройки, кликнув по соответствующей кнопке.

Откройте раздел «Общие» (в других проектах может называться «Видео» или «Графика») и из выпадающего списка «Разрешение экрана» выберите значение, равное размеру монитора в пикселях.

После вступления изменений в силу поменяйте параметр «Полноэкранный режим» на «Без рамок». В других играх, возможно, нужно будет выбрать «Включить» или поставить галочку у соответствующего пункта.

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

Способ 4: Настройка видеокарты

Видеокарты от NVIDIA и AMD имеют собственную панель управления в Windows, посредством которой можно вносить изменения в параметры отображения изображения на экране монитора. Если игры запускаются с некорректным соотношением сторон и вышеописанные методы не исправили ситуацию, рекомендуется откорректировать некоторые значения соответствующих настроек.

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

Подробнее: Как открыть панель управления видеокартой NVIDIA / AMD

После запуска нужного приложения следует выполнить настройку дисплея. Для каждой видеокарты руководство отдельной. Сначала будет разобран чип от AMD:

1. Находясь в главном меню программы, перейдите в раздел «Дисплей», который размещен на панели сверху.
2. Задайте параметру «Масштабирование ГП» значение «Вкл.», после чего измените «Режим масштабирования», выбрав из списка пункт «Полная панель».
3. Закройте приложение и перезапустите компьютер, чтобы изменения сразу отразились на работе операционной системы.

Чтобы выполнить настройку NVIDIA, после запуска панели управления необходимо перейти в раздел «Дисплей» → «Регулировка размера и положения рабочего стола», после чего задать следующие параметры:

1. Установите режим масштабирования «Во весь экран».
2. Из выпадающего списка «Выполнить масштабирование» выберите значение «ГП».
3. Поставьте отметку напротив пункта «Замещение режима масштабирования, заданного для игр и программ».
4. В блоке «Просмотр» установите корректное разрешение монитора.

Для сохранения изменений нажмите кнопку «Применить», после чего перезапустите компьютер. Это поспособствует немедленному применению всех заданных параметров.

Способ 5: Уменьшение разрешения операционной системы

Когда на современных компьютерах с мониторами 4К и больше игры запускаются некорректно, необходимо попробовать предварительно уменьшить разрешение непосредственно операционной системы до FullHD (1920 на 1080 пикселей). Сделать это можно штатными средствами, как было описано ранее, но в качестве альтернативы рекомендуется воспользоваться специальным программным обеспечением. Список приложений и детальное их описание представлено в другой статье на сайте.

Изображение во весь экран

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

.center
Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 16 апр 2012 в 4:16
121 1 1 золотой знак 7 7 серебряных знаков 21 21 бронзовый знак

У вас код CSS неправильный 50% повторяется 4 раза а по идее всего 100% т.е 4 раза по 25% (а не 50% как у вас)!

16 апр 2012 в 13:07
У меня одни только вопрос где-ты там увидел 50%?)
16 апр 2012 в 15:46

Возможно, про это?

16 апр 2012 в 15:56
Так это и не мой код)
16 апр 2012 в 17:52
16 апр 2012 в 18:41

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

body < height:100%; background:url('../img/bg1.jpg') center top no-repeat; background-size:100% 100%; >

   table < border:1px solid red; height:100%; margin:0; padding:0; >table tr td < height:25%; width:100px; border:1px solid blue; background:url('bg.gif') left top no-repeat; background-size:100% 100%; >table tr td a 

Отслеживать
ответ дан 16 апр 2012 в 4:25
612 6 6 серебряных знаков 21 21 бронзовый знак
так у меня 4 изображения и три из них являются ссылками.
16 апр 2012 в 4:29

Как вариант — есть плагин backstretch

Отслеживать
ответ дан 16 апр 2012 в 18:07
34k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков

 html, body #bg #content 
.
 

Только предупреждаю сразу: картинка будет выглядеть страшно.

Отслеживать
ответ дан 17 апр 2012 в 9:36
14.7k 1 1 золотой знак 26 26 серебряных знаков 48 48 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать картинку фоном в HTML и CSS. 3 простых способа

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

html < background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; >

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Для того чтобы изображения загружались быстро, размещайте свои сайты только у проверенных хостинг-провайдеров, например, Beget.com Пользователи и поисковые системы любят быстрые сайты.

Способ 2

Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера. Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

img.background < min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Зависит от размера изображения */ @media screen and (max-width: 640px)< img.bg < left: 50%; margin-left: -320px; >> >

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в , который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.

div.background < position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; >img

Этот способ работает в хороших браузерах и IE 8+.

Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.

Как сделать картинку (панель) на весь экран?

Есть картинка («панель»). При активации объекта она должна растягиваться и занимать весь экран.

Код ниже устанавливает размер панели.
На разрешении 1920×1080 (вызываю в юнити метод ChangeResolution) панель растягивается на весь экран.
На разрешении 1152×864 (когда по бокам экрана черные полосы) — панель заполняет центральную часть экрана, оставляя по краям пустое пространство.

Отладка показывает, что передается верное разрешение для установки размера панели.

Как сделать картинку (панель) на весь экран?

public class DialogWindowController : MonoBehaviour < private GameObject backgroundPanel; RectTransform backgroundPanelRectTransform; void OnEnable() < // Получаем ссылку на панель и устанавливаем её размер на весь экран. backgroundPanel = transform.Find("BackgroundPanel").gameObject; backgroundPanelRectTransform = GetComponent(); backgroundPanelRectTransform.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height); // Отладка. Разрешение совпадает с реальным. Всё верно. string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height; Debug.Log(str); using (StreamWriter writer = new StreamWriter("test.txt"))

• Вопрос задан 18 сент.
• 42 просмотра

Комментировать
Решения вопроса 1
Охотник на пиратов и сборщик монолитов

Тут есть несколько моментов.

1. Перевожу на русский, что вы пытаетесь сделать:
Взять текущее разрешение экрана (не окна Game, а именно что экрана) - что значит, что у вас в консоли должно выводиться 1920x1080 даже при 1152x864. Если вам нужен размер именно окна Game, то его размеры такие:

int screenWidth = Screen.width; int screenHeight = Screen.height;

2. Единственный сценарий зачем это всё может быть надо что пришёл мне в голову - вы хотите заблочить клики вне диалогового окна за счёт непрозрачного для нажатий фона, но так как фон находится в префабе, вам приходится мучаться с его растяжением на весь экран.
Если я вдруг не ошибся, то есть решение проще.

Решение:

Создаёте префаб изначально растянутый на весь экран. Внутри него создаёте пустой объект, который и будете включать и выключать, опять же, растянутый на весь экран. А внутри уже нужный вам фон (тоже растянутый) и панелька с текстом и кнопками.
Таким образом вам достаточно просто включать выключать пустышку, которая будет работать и с фоном и с панелькой. Вот пример:

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

Вот пример:

public class DialogWindowController : MonoBehaviour < private GameObject backgroundPanel; RectTransform backgroundPanelRectTransform; void OnEnable() < // Получаем ссылку на панель и устанавливаем её размер на весь экран. backgroundPanel = transform.Find("BackgroundPanel").gameObject; backgroundPanelRectTransform = GetComponent(); backgroundPanelRectTransform.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height); // Отладка. Разрешение совпадает с реальным. Всё верно. string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height; Debug.Log(str); using (StreamWriter writer = new StreamWriter("test.txt")) < writer.WriteLine(str); >> >

public class DialogWindowController : MonoBehaviour < [SerializeField] private RectTransform _background; void OnEnable() < _background.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height); // Отладка. Разрешение совпадает с реальным. Всё верно. string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height; Debug.Log(str); using (StreamWriter writer = new StreamWriter("test.txt")) < writer.WriteLine(str); >> >

Ответ написан 20 сент.
Нравится 1 3 комментария

Евгений Иванов @logpol32 Автор вопроса

Спасибо за ответ.
Вопрос, вроде простой - но всё таки решения я не нашел. Мучал чат gpt - тоже пока нет результатов (

1) К сожалению ваш код int screenWidth = Screen.width; никак не повлиял на результат. Всё так же -

На разрешении 1920x1080 (вызываю в юнити метод ChangeResolution) панель растягивается на весь экран.
На разрешении 1152x864 (когда по бокам экрана черные полосы) - панель заполняет центральную часть экрана, оставляя по краям пустое пространство.

что странно - на большем разрешении панель на весь экран - на меньшем нет.

2) Вы правы - я хочу заблокировать клики. Не понял смысл вашей идеи.
У меня есть префаб DialogYesNoWindow - "пустышка". Внутри его само окно и панель.
Включаю пустышку - появляется окно и панель.

Возможно, мне не надо программно растягивать панель. Посмотрите на картинку.

Панель BackgroundPanel растянута (Strech), но её нет на экране. Её реальный размер 0 на 0.
Это странно. У неё нет параметров Width и Height. И как её растянуть?

3) Я правильно понял, что перетаскивая в редакторе панель, вы передаете в поле [SerializeField] private RectTransform _background; ссылку на компонент типа RectTransform с данного объекта?
Разве так можно? Я думал, что в поле можно перетаскивать только объекты и получая ссылку искать на объекте компонент..

Евгений Иванов,
Первое объясняется просто - дело не в конкретных размерах, а в соотношении экрана. У вас изначально стоит 1920:1080, что есть соотношение 16:9, а новое 1152:864 это соотношение 4:3 (ну или 12:9), поэтому у вас либо ширина либо высота в итоге не совпала бы в любом случае.

Второе, распишу по шагам, чтобы вам было удобнее.

1. Создайте объект-пустышку внутри канваса. На него киньте ваш скрипт. Теперь для вызова обращайтесь не к gameObject.SetActive(), а к скрипту.

2. Вот так примерно должен будет выглядеть скрипт. В данном примере это окно выхода

using UnityEngine; public class YesNoDialog : MonoBehaviour < [SerializeField] private GameObject _panel; public void SetShown(bool isShown) < _panel.SetActive(isShown); >public void OnExit() < Application.Quit(); >>

Вызов будет выглядеть следующим образом:

public class ExampleScript : MonoBehaviour < [SerializeField] private YesNoDialog _yesNoDialog; // ссылка на окно private void SomeFunc1() < // много чего разного и в процессе нужно показать окно _yesNoDialog.SetShown(true); >>

На кнопку назад и закрыть можно привязать в Button.OnClick событие YesNoDialog/SetShown/false.

3. Помещаем объект пустышку в дочерние, тоже растягиваем. Растяжение нужно чтобы размер экрана никак не влиял на геометрию видимой панельки.

4. Перетащите панель, чтобы потом скрипт мог с ней взаимодействовать.

5. Добавьте растянутый дочерний к панели объект с прозрачным Image. Именно он блокирует фоновые клики. Вы кстати на него можете повесить невидимую кнопку закрытия окна.

6. И добавляете саму панель с кнопками. Вот её растягивать уже не нужно.

Привязываете к кнопкам опять же не панель, а рут объект, на котором висит ваш скрипт. Когда вы освоитесь получше, вы сможете эту концепцию расширить, сделав так, что эта панель будет обслуживать все возможные события, когда нужно выбрать да/нет, путём подмены текста и событий при нажатии.

Третье, да. Скажу вам более, вы можете так передать заранее ссылки на что угодно в рамках контекста.

Евгений Иванов @logpol32 Автор вопроса

2 У меня уже реализована подобная система. Практически как у вас.
Есть объект префаб - менеджер окон, с [SerializeField], в которые я помещаю префабы-окна.
Далее я обращаюсь к скрипту менеджера окон и вызываю окна, скрываю окна, переключаю окна и т.д.
Плавное появление завязано на DOTWEEN.

public class GameWindowsControllerScript : MonoBehaviour < [SerializeField] public GameObject[] gameWindows; // Массив окон. private GameObject gameWindow; public void OpenGameWindow(GameObject gameWindow, float animationDuration = 0.3f, System.Action callback = null) < // Активируем объект. gameWindow.SetActive(true); // Устанавливаем начальное значение прозрачности объекта в 0. gameWindow.GetComponent().alpha = 0; // Плавно показываем объект с использованием DOTween. gameWindow.GetComponent().DOFade(1, animationDuration) .OnComplete(() => < callback?.Invoke(); >); // По окончанию вызываем колбек. > > // и т.д.

Кстати, кнопки на окнах тоже пришлось сделать "с нуля" с помощью DOTWEEN т.к. у стандартных кнопок нет плавного переключения нескольких картинок (либо резко переключаем картинки, либо плавно цвет, есть и анимация но не уверен, что там можно делать всё, что можно с дотвин).

В общем спасибо - разобрался. Настроил пустышку - растянул и настроил панель. Заработало как надо.