Как расположить блок с картинкой?

@useruser · Регистрация: 29.06.2015

Author24 — интернет-сервис помощи студентам

У меня есть большая картинка. Я хочу сделать её фоном. И именно через блок-div (не body).
Картинка не должна изменять свой размер (не должна масштабироваться).

Т.е. вот так.
[del]

Больше разрешение экрана или окно браузера - видим больше картинки.

Мой код такой
https://jsfiddle.net/L7xav0ew/8/

HTML5

<div class="image_background">
<div class="page_content">
Контент страницы
</div>
</div>

CSS

.image_background
{
position: fixed;
left:0px;
top:0px;
width:1920px;
height:1080px;
background-image:url(https://images.wallpaperscraft.ru/image/everest_gory_nebo_vershiny_96976_1920x1080.jpg);
background-repeat:no-repeat;
}
.page_content
{
position: fixed;
left:0px;
top:0px;
height:100vh;
width: 100vw;
}

Но, картинка как то масштабируется. Открыв её в ACDSee в 100% разрешении (или чем угодно), я вижу справа ту часть, которую не вижу при просмотре страницы.
Начертив линию на 1920 пикселе (мое разрешение по горизонтали) и 1600 пикселе, на странице я увижу только линию на 1600 пикселе причем рядом с краем экрана. Картинка явно увеличена.

Как расположить блок с картинкой?

@master114 · 17.07.2018, 21:12

если попробовать задать блоку ширину 100vh и overflow:hidden

по идее блок будет занимать все время ширину браузера и картинка будет отображаться только по этой ширине а все что лишнее спрячется

@winwin22 · 17.07.2018, 23:06

Растянуть картинку

@master114 12 / 12 / 3 Регистрация: 04.07.2018 Сообщений: 47
	17.07.2018, 21:12	2
	если попробовать задать блоку ширину 100vh и overflow:hidden по идее блок будет занимать все время ширину браузера и картинка будет отображаться только по этой ширине а все что лишнее спрячется 0

@winwin22 7 / 7 / 5 Регистрация: 07.06.2018 Сообщений: 117
	17.07.2018, 23:06	3
	Растянуть картинку 0

Опции темы