图片宽度超出屏幕大小如何居中?

我有一张banner图,宽1920px,而屏幕只有1440,如何让这张banner图水平居中?
已邀请:

Bazing

赞同来自: Aseoe

如果只是在1440宽的屏幕上居中的话可以直接使用position属性偏移:
/*(1920-1440)/ 2 = 240;*/
img{
posiotn: absolute;
left: -240px;
}
要是想在所有的屏幕上居中显示的话,可以给img添加一个div。
div{
 width: 1920px; /* 宽度和图片相同*/
 position:absolute;
 right: 50%;
}
img{
 position: absolute;
 left:50%;
 
}
还可以用js,不过css简单点。

Aseoe - 爱思资源网创始人

赞同来自:

这里还有一种方法 在所有的屏幕上居中显示
这个是针对图片宽1920px
写两个div
 <div class="banner"><div class="banner_pic"><img src="" alt="" /></div></div>
.banner{
     overflow: hidden;
     width: 100%;
     height: 510px;
     position: relative;
     }
 .banner_pic{   
     width: 100%;
     height: 510px;
     position: relative;
 }
 .banner img{
     display: block;
     vertical-align: middle;
     position: absolute;
     border: 0;
     left: 50%;
     margin-left:-960px; /*图片真实宽度的一半*/
}
 
 
这个是老的写法了,楼上的方法,还是比较简洁高效的,可以学习一下

永恒

赞同来自:

.conner{
 width: 1920px; /* 宽度和图片相同*/
 position:absolute;
 right: 50%;
}
.conner img{
 position: absolute;
 left:50%;
 
}

我是偏执狂

赞同来自:

object-fit 的兼容性还是不错的(打死 IE,不管它),
它可以让子级像 background 那样定位和设置大小,非常赞。

要回复问题请先登录注册