这是我最近做的一个功能，用图片做一个引导页，类似于蒙版的遮罩效果。里面碰到的一个问题是，网页是做了自适应宽高的，所以随着屏幕的缩放显示都不会有问题，但是图片不行，一旦不按比例拉伸，就会使图片变形，达不到我们想要的效果。最后给出的一个方案是，按短边优先去拉伸图片（遮罩），由于网页是按屏幕可视区域做自适应的，所以，遮罩既可以覆盖整个页面，图片也不会变形，图片超过浏览器的可视区域时就会出现滚动条，算是一种折中的解决方法吧。
我的图片是16：9的
实现过程：
.guide{ //这是蒙版层的基本样式
display: none;
position: absolute;
left:0;
top:0;
z-index: 100000;
}
@media (max-aspect-ratio:16/9){ //宽度<=16：9时：
.guide{ //蒙版的高度按父类（我这里是body下的一层，高度也是浏览器的可视高度）的高度来做100%填满，不设置width，让图片自己把guide撑起了
height: 100%;
}
.guide img{ //图片的高度填满guide，宽度不设置，图片会按比例展开，并撑起父类，此时会出现横向的滚动条，但图片不会变形
height:100%;
}
}
@media (min-aspect-ratio:16/9){ //宽度>=16：9时：
.guide{ //同上，设置宽度不设置高度
width: 100%;
}
.guide img{ //道理同上，此时会出现纵向的滚动条，但图片不会变形
width:100%;
}
}
网友评论