css – 大于屏幕的中心图像

前端之家收集整理的这篇文章主要介绍了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.

原文链接:https://www.f2er.com/css/214313.html

猜你在找的CSS相关文章