当前位置:秋叶网络博客 前端设计 ◊ 纯css自适应div高度(等比缩放)

纯css自适应div高度(等比缩放)

作者:秋叶 发表时间:2017年3月08日

网页自适应宽度大家都很熟悉,设置百分比即可,但是自适应高度一直是让人头疼的事情。何为自适应高度,就是一个div我们设置了自适应宽度,在不同大小屏幕尺寸下,宽度会变化,高度也随着初始比例变化。然而实际中很多人的做法是通过js根据初始比例计算改变宽度后的高度,再应用到div上,有的甚至是直接就写死高度,宽度无论如何变化,高度都是这个样子,就会造成宽屏下,div显得矮胖,窄屏幕下,div显得瘦高。

用js就太影响性能了,杀鸡焉用宰牛刀,来看看灵活性非常高的css怎么实现的。

思路:div里面放一个img标签,图片为期望的高宽比例的图片,并设置宽度为100%,高度自适应,透明。其目的就是利用图片所特有的性质,只改变宽或者高时,高或者宽按比例自动调整。div的宽高就被图片所撑起来来,即图片的宽高。为了不影响div的宽高,div里面的内容采用绝对定位,或者背景图的形式。

这是绝对定位文字

啦啦啦我是描述信息啦

<style type='text/css'>
.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 class="page475_box">
 <div class="page475_content" style="background:url('16.jpg') no-repeat center;background-size:cover;">
     <img src="size.jpg"/>
     <div class="txt">这是绝对定位文字</div>
 </div>
 啦啦啦我是描述信息啦
</div>

无论怎样自适应,该div的宽高比都是一样的。唯一缺点就是多了个图片标签,看自己取舍,一个页面大于十个以上,标签就会比较多,比较适合少于10个的页面。

转载请保留链接:纯css自适应div高度(等比缩放) | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/475.html
目录: 前端设计 | 标签: | 6609次阅读