大图居中的两种写法

现在网站,首页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%;
1920px;
}
.ff{
position:absolute;
left:-50%;
}

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

1、以专家为榜样,不必自己重新探索
2、解构技能,找出实现80%效果的那20%
3、不要一心二用
4、练习练习再练习!然后获得即时反馈
5、坚持,不要在低谷期放弃
原文地址:https://www.cnblogs.com/zhongyuan/p/3613857.html