Как растянуть изображение в HTML-странице на 100% окна для разных браузеров?

html браузеры веб-дизайн разрешение оптимизация кода

Содержание HTML-страницы – фотография с разрешением 1920х1275, растянутая на 100% окна браузера. Хотелось бы, чтобы она полностью заполняла собой окно браузера при разных пользовательских разрешениях экрана. Для этого я использую параметр width=100% тэга img. Код изображения вставлен в div-слой. Параметры слоя - width: 100%; height: 100%; position: absolute. В Firefox всё идеально. А вот в Safari изображение заполняет 100% экрана только в ширину, в результате чего под фотографией возникает пустая белая область (аналогичная проблема наблюдалась в Chrome; в IE пустая область возникает не под изображением, а справа).

Как сделать так, чтобы фотография заполняла собой 100% окна браузера при разных браузерах и пользовательских разрешениях? + можно ли сделать так, чтобы за пределы фотографии с разрешением 1920 пользователь не мог растягивать окно браузера?

П.С. полоски прокрутки на странице отключены.

Вот так выглядит мой код:

<html>
<title>image 100%</title>
<LINK href="fullscreen.css" rel=Stylesheet type=text/css>
</head>
<body>
<body>
<div id="layer1">
<img src="image.jpg" width="100%" border="0">
</div>
</body>
</html>

Параметры слоя из CSS:

BODY { overflow: hidden;
overflow-x: hidden;}
#layer1 {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

Заранее спасибо!

Примечание:
p.s. Я понимаю, что размеры "квадратного" экрана и "прямоугольной" картинки отличаются - обойти это можно переводом контента в тот же попап, но проблема управлением разрешением окна (или в ином случае попапа) для меня по-прежнему, увы, остается. Можно ли подчинить его изобаржению при разных пользовательских разрешениях?
Ответы:
Подумайте внимательно о размерах экрана монитора и размерах картинки, ляжте спать и утром поймете... что вы тупили)
> В Firefox всё идеально. А вот в Safari изображение заполняет 100% экрана только в ширину, в результате чего под фотографией возникает пустая белая область (аналогичная проблема наблюдалась в Chrome; в IE пустая область возникает не под изображением, а справа).
Поставь только height: 100%;
Но при этом иногда картинка будет обрезаться справа.


14 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.