Как сделать чтобы картинка была на весь экран
Перейти к содержимому

Как сделать чтобы картинка была на весь экран

  • автор:

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

Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо.

2 мар 2016 в 7:27
Спасибо большое! Очень помогло
22 мая 2020 в 10:43
Отслеживать
ответ дан 2 апр 2012 в 14:58
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 20 20 бронзовых знаков
не сработает если реальная ширина картинки будет меньше ширины окна браузера.
2 апр 2012 в 15:09

Важно не забывать кавычки ставить: background: url(«img/image.jpg») , иначе на экранах с некоторым разрешением внизу может появляться «полоса»— опускается самая верхняя часть фоновой картинки.

Отслеживать
ответ дан 19 фев 2016 в 11:18
Саша Черных Саша Черных
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака

Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно 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.

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

Как сделать изображение на всю ширину окна браузера?

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

Для изменения ширины достаточно задать значение атрибута width тега как 100% . При этом высота изображения будет вычисляться автоматически исходя из сохранения пропорций, поэтому атрибут height указывать не нужно (пример 1).

Пример 1. Ширина изображения

HTML5 IE Cr Op Sa Fx

    Ширина 100%  

Винни-Пух

Результат данного примера показан на рис. 1.

Изображение с шириной 100%

Рис. 1. Изображение с шириной 100%

Если для тега все-таки установить значение атрибута height в пикселах или процентах, то высота изображения будет задана принудительно, соответственно, исказятся его пропорции.

Как расширить экран на весь монитор

Иногда, включив бу компьютер или бу ноутбук с ОС Windows, вы можете обнаружить, что изображение рабочего стола на экране сузилось, или сильно уменьшилось, и окружено черной рамкой. Почему может возникнуть такой сбой, и как расширить экран на весь бу монитор — вы узнаете из этой статьи.

Почему сузился экран — основные причины

  • Неверно выставлено разрешение экрана.
  • Отсутствуют драйвера видеокарты.
  • Пользователь подключил к ПК дополнительный экран.
  • Сбились настройки самого монитора.

Как настроить экран, если сбились настройки разрешения

С подобной проблемой пользователи сталкиваются чаще всего после установки (переустановки) операционной системы. Еще одна причина возникновения такой ситуации — изменение пользователем настроек разрешения для определенной видеоигры или программы. Как исправить:

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

Как расширить экран на весь монитор, если пропали драйвера видеокарты

Такая проблема может возникнуть, если вы недавно установили или переустановили ОС Windows 10, либо заменили видеоадаптер. Как правило, в процессе переустановки ОС или замене видеокарты, на ПК автоматически устанавливаются временные драйвера. Если сразу не загрузить специализированные, со временем вы столкнетесь с проблемой сужающегося экрана.

Чтобы убедиться, что причина некорректного отображения изображения — в отсутствии драйверов, зайдите в меню настройки экрана. Вы заметите, что в пункте “Разрешение” пропал выпадающий перечень параметров разрешений (или он сократиться до двух вариантов). Затем зайдите в “Диспетчер устройств”. Здесь в пункте “Видеоадаптеры” будет написано “Стандартный VGA графический адаптер”, а в пункте “Другие устройства” — “Неизвестное устройство”. Как исправить: Загрузите нужные драйвера с диска, что идет в комплектации к видеокарте (или ОС), или загрузите их с сайта производителя (разработчика). Установка драйверов происходит автоматически. После установки, перезагрузите ПК.

Как расширить экран при подключении к ПК дополнительного монитора

Если у вас подключен второй экран, при этом на основном — некорректное отображение рабочего стола, скорее всего, причина проблемы — в подключенном дисплее. Как проверить: Отключите второй экран. Если на основном изображение пришло в норму, значит ваша гипотеза верна.

  • зайдите в меню настроек дисплея;
  • найдите пункт “Разрешение экрана;
  • выберите основной монитор в строке “Экран”;
  • установите рекомендуемые параметры в строке “Разрешение”.

Как расширить экран через настройку монитора

Если вы проверили все перечисленные выше причины, и ни одна из них не подходит к вашей ситуации, проблему поможет решить автонастройка монитора. Обратите внимание на ряд кнопок, расположенных на передней или боковой части монитора. Среди прочих, вы заметите кнопку “Auto”. Чтобы запустить процесс автонастройки, достаточно просто на нее нажать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *