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

作者：秋了秋发表时间：2017年03月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个的页面。

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/475.html

目录: 前端编程标签: 自适应 15995次阅读