高度随宽度适应的响应式方案

概述

高度随宽度自适应有很多种方案，这里只讨论一种巧妙的方案，就是利用margin/padding。我把代码记录下来供以后开发时参考，相信对其他人也有用。

知识点

margin/padding有这么一个很巧妙的知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

自适应方案一

那么可以使用padding-bottom/top来实现自适应方案一，代码如下：

然而这个代码有一个缺点，就是无法设置max-height。原因是它的height是0，它是靠padding撑起来的，但是padding不属于height。所以我们有如下方案二。

自适应方案二

可以使用margin-bottom/top来实现自适应方案二，代码如下：

可以看到，max-height起了作用。

填充内容

由于没有规定高度，那么向其中填充内容势必会占据一定的空间从而影响高度。所以这个时候一般利用绝对定位来向其中填充内容。

转载于:https://www.cnblogs.com/yangzhou33/p/9175651.html