现在网站,首页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%;
}
这个涉及到数学上的转换,大家自己思考了。我这也是拾取他人牙慧,经自己琢磨改写的。效果很不错,推荐~