CSS让大的banner图主区域居中显示

  ;left:-30%;" src="Img/s.png" />

假定主区域宽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属性也可以直接给绝对值,像下面这样:

        

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

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

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

你可能感兴趣的:(CSS让大的banner图主区域居中显示)