html banner不自动切换,css banner不拉伸

css banner不拉伸

现在很多网站的Banner图片都是全屏宽度的，这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片，然后在不同分辨率下都是显示图片的中间部分。实现方法如下：

1、首先设置banner的父元素定位为相对定位，宽度为100%；

2、然后设置banner元素宽度为图片宽度，定位为绝对定位；

3、最后再设置它距离左侧50%，margin-left为图片一半即可。

Title

.bannerbox {

width:100%;

position:relative;

overflow:hidden;

height:500px;

}

.banner {

width:1920px; /*图片宽度*/

position:absolute;

left:50%;

margin-left:-960px; /*图片宽度的一半*/

}

把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小，然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

本文来自css答疑栏目，欢迎学习！