盒子自适应—宽高比值固定
多用于移动端的项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子自适应—宽高固定比例</title>
<style>
*{
/*margin: 0;
padding: 0;
box-sizing: border-box;*/
}
/*以上全局样式 可有可无 根据实际项目决定*/
#box{
max-width: 100%;
padding-bottom: 50%;
height: 0;
overflow: hidden;
background-color: pink;
}
/*1.max-width 让宽度自适应
*2.padding-bottom 是盒子真正的高度
* 因此，盒子的宽高比值是100%:50%(2:1)
*3.由于用2实现了盒子的高度,盒子的height是0
*4.overflow 溢出的部分可以隐藏
*5.小demo为了能看见盒子，设置背景颜色
*6.修改以上两个百分比 即可修改宽高比值*/
</style>
</head>
<body>
<div id="box">
<p>此盒子的宽高比值是2:1(100%:50%)</p>
</div>
</body>
</html>