Я прикрепил рисунок, как выглядит моя страница. Страница имеет ширину 980px
, а изображение имеет ширину почти 1200px
. То, что я хочу достичь, - это центрирование страницы и отображение как можно большего количества изображения, а также поддержание центрирования изображения. Я попытался полностью позиционировать изображение, но затем на мобильных устройствах страница браузера установлена на ширину изображения, а контент не остается центрированным.
В принципе, могут быть экраны, где не все изображение отображается пользователю, но только столько, сколько подходит для экрана.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>