大图居中的两种写法

现在网站，首页banner一般是大图，由于要兼容台式机高分辨率，都会使用1600px或者1920px的图片。

但这些大图在小屏幕下的显示，会让人有点头疼。

网上搜了很多，复制的，拷贝的，都没几个自己写自己测试过的。now，看过来，下面两种做法可以解决你的难言之隐~ 哈哈~

方法一：最简洁，利用background  50%

<html>
<body>
<style>

.banner {
height: 339px;
background: #d8d9de url(banner2.jpg) no-repeat 50% 0;
}
</style>

<section id="home_banner" class="banner"></section>

</body>
</html>

方法二：有时必须用img标签的情况

.dd{
margin: 0 auto;
position:relative;
overflow:hidden;
}
.mm{
position:absolute;
left:50%;
width:1920px;
}
.ff{
position:absolute;
left:-50%;
}

　　这个涉及到数学上的转换，大家自己思考了。我这也是拾取他人牙慧，经自己琢磨改写的。效果很不错，推荐~

 

posted @ 2014-03-20 15:32  zyliang  阅读(249)  评论(0)  编辑  收藏  举报