css – 大于屏幕的中心图像

我附上了我的网页的样式.该页面的宽度为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>

解决方法

请使用位置：相对于图像.像这样：

<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;
}

margin-left等于img的width / 2.查看demo.

css – 大于屏幕的中心图像

解决方法

相关文章