html自动调整行高div,纯css自适应div高度(等比缩放)

网页自适应宽度大家都很熟悉，设置百分比即可，但是自适应高度一直是让人头疼的事情。何为自适应高度，就是一个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个的页面。