CSS让大的banner图主区域居中显示-CSDN博客

<div style="width:1200px;height:700px;margin:0 auto;position:relative;">
　　<img style="display:block;width:158%;height:700px;position:absolute/*relative*/;left:-30%;" src="Img/s.png" /> </div>

假定主区域宽1200px并让其居中，如上面的div盒子所示。

如何让1900px宽的banner大图主区域（即banner图中间的1200px）在div（1200px宽）中显示呢？

我的做法如上，将img变成块级元素，让它的width设为158%（这个比值是1900px比1200px得来的）,left设为-30%（这个值是1900-1200=700,700除以2=350,350除以1200的到的），呵呵，绕来绕去的百分比是吧，没关系，由于外面的盒子主区域宽度固定，所以img宽度和left属性也可以直接给绝对值，像下面这样：

        <div style="width:1200px;height:700px;margin:0 auto;position:relative;">
            <img style="display:block;width:1900px;height:700px;position:absolute/*relative*/;left:-350px;" src="Img/s.png" />
        </div>

这样也就不用担心缩放啦（看看ctrl+鼠标滚轮缩放吧，是不是发现主区域依然在正确的位置呢）

不过上面的设置还有点问题，那就是会出现水平滚动条，解决方法是在包裹div盒子的元素上使用overflow-x:hidden

转载于:https://www.cnblogs.com/Arlar/p/5104902.html