高度随宽度适应的响应式方案
Posted yangzhou33
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高度随宽度适应的响应式方案相关的知识，希望对你有一定的参考价值。
概述
高度随宽度自适应有很多种方案，这里只讨论一种巧妙的方案，就是利用margin/padding。我把代码记录下来供以后开发时参考，相信对其他人也有用。
知识点
margin/padding有这么一个很巧妙的知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
自适应方案一
那么可以使用padding-bottom/top来实现自适应方案一，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div {
width: 50%;
background-color: green;
padding-top: 70%;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>然而这个代码有一个缺点，就是无法设置max-height。原因是它的height是0，它是靠padding撑起来的，但是padding不属于height。所以我们有如下方案二。
自适应方案二
可以使用margin-bottom/top来实现自适应方案二，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div {
width: 50%;
background-color: green;
overflow: hidden; //形成BFC，不影响外面的元素
max-height: 300px;
}
.div:after {
content: '';
display: block;
margin-top: 50%;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>可以看到，max-height起了作用。
填充内容
由于没有规定高度，那么向其中填充内容势必会占据一定的空间从而影响高度。所以这个时候一般利用绝对定位来向其中填充内容。
以上是关于高度随宽度适应的响应式方案的主要内容，如果未能解决你的问题，请参考以下文章