Изображение центра больше, чем экран

Я прикрепил рисунок, как выглядит моя страница. Страница имеет ширину 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>

enter image description here

Ответы

Ответ 1

pls используют положение: относительное для изображения. Например:

<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>

Код css:

.page_container {
width: 980px;
margin: 0 auto;
  background: orange;
}

.image {
  position: relative;
  left: 50%;
  margin-left: -600px;
}

левая маржа равна ширине img/2. PLS просмотрите демонстрацию .

Ответ 2

Вы можете попробовать это

 <div class="popup">
 <div class="wrapper">
 <img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
 </div>
 </div>

CSS

.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative; 
left:-50%;

/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}

Пример: jsfiddle

Элад Шехтер

Ответ 3

.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}

Ответ 4

Вы можете попробовать следующим образом:

HTML:

<div class="wrapper">
    <div class="image">
        <img src="img/img.jpg">
    </div>
</div>

JS:

<script>
$(document).ready(function() {
    $('div.image').each(function() {
          var imageSrc = $(this).find('img').attr('src');
          $(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
    });
});
</script>

CSS

.wrapper {
    float: left;
    width: 100%;
    overflow: hidden;
}
.wrapper .image img {
    visibility: hidden;
}

Ответ 5

фон-размер: авто;

установите это свойство для своего изображения

Ответ 6

Попробуйте следующее: -

  .image {
    position: absolute;
    left: -50%; 
  }

Я думаю, что он будет работать для больших изображений...

Ответ 7

.image {     позиция: абсолютная;     слева: -50%; }