最近项目中需要实现一个banner,如图所示.(设计图稿为1680*412)
当前实现的思路:
div(position:relative;width:100%;height:412px;)>ul >li>a>img (width:100%;height:412px)
问题:平铺桌面但文字会被挤压
这个时候,产品给出了一个参考效果,见链接.https://hz.fang.com/?s=BDPZ-BL。(图片尺寸2000*)总体效果是,屏幕大屏,缩放时内容不会被压缩,一直展示图片中间部分。
实现原理貌似是这个样子的:
div(position:relative;width:100%;)>a(position:absolute;margin-left:-1000px;left:49%;)>img(width:2000px;height:464px;)
使用的是自适应居中的技巧,想到一个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
position: relative;
width: 100%;
height: 412px;
overflow: hidden;
}
.box p{position: absolute;top: 50%;left: 17.6%;}
.box img{
width: auto;/*要点*/
height: auto;;/*要点*/
max-width: 100%;;/*要点*/
max-height: 100%;;/*要点*/
min-width: 1000px;;/*要点*/
}
</style>
</head>
<body>
<div class="box">
<a href="">
<img src="img/banner1.png" alt=""/>
<p>跟随者!</p>
</a>
</div>
</body>
</html>
效果:会根据窗口大小自适应宽高,图片完整显示(这种写法可以用于触屏端的页面)。但,等等,回想下产品给的参考效果,并不是宽高自适应,真正的需求效果是!!高度不变,在拉缩窗口时图片展示中间部分内容,窗口小于1200px时不动。不涉及图片本身的拉伸!!!所以,在图片上下功夫的思路是不对滴!它就应该全部展示,通过其他方式控制展示图片的内容。看到一篇文章得到启示。https://www.jianshu.com/p/a0a99e28414d
既然不是直接控制图片,我可以给它包裹div控制div的居中显示!!
试了下果然满足要求,最终代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box2{position: relative;
width: 100%;
height: 412px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box2">
<a href="" style="display: block;position: relative;">
<div style="position:absolute;width: 2000px;height: 416px;left: 50%;margin-left: -1000px;">
<img src="img/banner1.png" alt="" height="416"/>
<p style="position: absolute;top: 50%;left: 17.6%;">跟随者!</p>
</div>
</a>
</div>
</body>
</html>
完美收工!