1、问题引出
我们在做项目的时候,很多时候会看到在页面头部有一个横贯整个屏幕的banner图,通常的做法可能是给图片设置绝对定位,让图片相对整个屏幕居中显示。常见的css代码如下所示:
.wrapper {
position: relative;
height: 416px;
}
.wrapper > img{
position: absolute;
left: 50%;
margin-left: -960px;
height: 100%;
}复制代码
当我们手动调整屏幕大小时,上述的处理方式会有一些小小的问题:
- banner图两侧的内容会被隐藏掉,用户无法预览到整张图片信息;
- banner图片高度太高会导致下面的主体内容展示很少;
问题如下gif图所示:
2、如何解决
在解决问题之前,我们需要明白一点的是:padding的百分比值无论是水平方向还是垂直方向都是相对于宽度来计算的!
具体的解决思路:就是通过设定padding的百分比值,padding在垂直方向和水平方向设定的百分比值为图片实际的高宽比值。
下面我以图片(宽*高:1920px*416px)为例:
.wrapper {
position: relative;
padding: 10% 46%;
}
.wrapper > img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 复制代码
修改之后的效果图如下:
这样的话我们就做到了对图片自适应的一个处理,上述方法就实现了一个高宽比为1:4.6的固定比例的头图效果,无任何兼容性问题!
3、小结
如果有什么疑问或者更好的建议,欢迎在评论区留言。文笔有限,文中若有不正之处,万望告知!