网页自适应宽度大家都很熟悉,设置百分比即可,但是自适应高度一直是让人头疼的事情。何为自适应高度,就是一个div我们设置了自适应宽度,在不同大小屏幕尺寸下,宽度会变化,高度也随着初始比例变化。然而实际中很多人的做法是通过js根据初始比例计算改变宽度后的高度,再应用到div上,有的甚至是直接就写死高度,宽度无论如何变化,高度都是这个样子,就会造成宽屏下,div显得矮胖,窄屏幕下,div显得瘦高。
用js就太影响性能了,杀鸡焉用宰牛刀,来看看灵活性非常高的css怎么实现的。
思路:div里面放一个img标签,图片为期望的高宽比例的图片,并设置宽度为100%,高度自适应,透明。其目的就是利用图片所特有的性质,只改变宽或者高时,高或者宽按比例自动调整。div的宽高就被图片所撑起来来,即图片的宽高。为了不影响div的宽高,div里面的内容采用绝对定位,或者背景图的形式。
这是绝对定位文字
啦啦啦我是描述信息啦
增加尺寸
减小尺寸
.page475_box{
width:600px;
text-align: center;
}
.page475_content{
width:50%;
margin:0 auto;
position: relative;
}
.page475_content img{
width:100%;
opacity: 0;
}
.page475_content .txt{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color:red;
}
啦啦啦我是描述信息啦
无论怎样自适应,该div的宽高比都是一样的。唯一缺点就是多了个图片标签,看自己取舍,一个页面大于十个以上,标签就会比较多,比较适合少于10个的页面。