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

Question

[Евгений Иванов]

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

Т.е. вот так.

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

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

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

.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 пикселе причем рядом с краем экрана. Картинка явно увеличена.

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

Comments

[Ankhena]

1. Проверьте масштаб в браузере. При таких стилях картинка должна показываться именно так, как вы хотите.
2. Чем оправдано позиционирование?

Answer 1

[dsmaslov]

https://jsfiddle.net/L7xav0ew/12/

Comments

[Евгений Иванов]

Простите, но нет.
В вашем примере картинка как раз масштабируется, изменяет размер, подстраивается под див.

Есть огромная картинка. И есть окно браузера.
Окно как бы накладывается сверху, на огромную картинку. (Причем левый верхний угол картинки и окна браузера всегда совпадают.) И в этом окне мы видим только часть картинки.
Увеличим окно браузера - увидим "больше картинки".

Хотя ваш подход, наверно более правильный.

[dsmaslov]

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

[Евгений Иванов]

Даниил Маслов, нет.
Представьте, что ваше окно - окно браузера. А весь мир - картинка.
Из окна вы видите часть мира. Больше окно - видите больше. Как то так.
Я на рисунке изобразил.

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

[ⓒⓢⓢ]

Евгений Иванов,

В вашем примере картинка как раз масштабируется, изменяет размер, подстраивается под див.

в примере ответа уберите стиль на 10 строке:
background-size: cover;
и картинка перестанет масштабироваться