<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 高度自适应 </title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
background-color: pink;
position: relative;
}
.main:after{display:block;content: "";visibility: hidden;clear: both;}
.main div{
float: left;
width: calc((100vw - 24px)/3);
position: relative;
padding-top: 35%;
margin-right: 8px;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
}
.main div:nth-child(1){background: url(images/1.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(2){background: url(images/2.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(3){background: url(images/3.jpg) no-repeat;
background-size: cover;
}
.p1{
position: absolute;
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div><p class="p1"> 图中三个 DIV 的宽高都会随着页面的大小放弃原有比例放大或放大。其核心思想就是利用 padding 来拓宽盒子高度。通过 padding-top 来设置百分比，使其百分比与宽度的百分比为须要的比例。这里须要留神的是：padding-top 中设置的百分比与 width 中设置的百分比都是以父元素的 width 为参考的 </p></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>