大banner居中

Posted 园园张

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了大banner居中相关的知识,希望对你有一定的参考价值。

图片比div框大,想让图片居中,不能使用text-align:center或者margin:0 auto.

可以使用定位流:position:absolute;left:50%;margin-left:-图片宽度一半;

图片比div框小,想让图片居中,能使用text-align:center或者margin:0 auto.

 

<div class="father">

   <img src="images/01.jpg" alt="banner图">

</div>

.father{

width:100%;   //和屏幕宽度一样

height:400px;

text-align:center;//必须用

overflow:hidden;  //防止出现滚动条

 

 

}

img{

height:100%;   //等比例缩放图片,

margin:0 -100%;

}

以上是关于大banner居中的主要内容,如果未能解决你的问题,请参考以下文章

做一个常规的banner图——负边距的使用banner图的拼法

一种让超大banner图片不拉伸全屏宽居中显示的方法

[转]一种让超大banner图片不拉伸全屏宽居中显示的方法

Banner尺寸多大最好!

缩放屏幕的时候banner被压缩变形!

用javascript实现大背景图的居中