实现一个宽高比5/1的自适应元素
<div class="scale"> <div class="banner"> 元素 </div></div>其实这个等比缩放的关键在于这个.scale元素，因为他的padding-bottom具有宽高联动的效果，所以就让这个元素成为一个模具，让真正要缩放的元素装入这个模具中，宽高跟随这个模具变化，就可以实现等比缩放的效果了
模具
padding-bottom: 20% 就是父元素宽度的20%，同时设定width：100%，其实padding-bottom就跟随width的大小比例走了，我们可以让padding-bottom来撑起元素的高度，所以height：0是为了把元素的高度完全交给padding-bottom，高度(padding-bottom)与宽度(width)保持一定的比例了，剩下的就让目标元素注入到模具中就可以了。
.scale { width: 100%; // 宽度100%同步父元素宽度，是为了随外部元素宽度自适应 padding-bottom: 20%; // padding-bottom值为半分比时受父元素宽度影响，20%就是相对于父元素宽度的20%，其实自适应等比例的宽高主要是保证宽高比一定，利用padding-bottom百分比的这一特点就能实现宽高的联动 height: 0; // 设定为0是为了高度让padding-bottom来撑起 position: relative; // 让该元素成为一个能等比缩放的"模具", 让子元素的宽高都跟随这个元素变动，就能实现子元素的等比缩放了。 .banner { position: absolute; // 跟随父元素"模具" width: 100%; // 跟随模具的宽 height: 100%; // 跟随模具的高 background-color: 499e56; }}max-width
虽然容器的内容高度为 0，但由于有了跟内容宽度一致的 padding，因此整体视觉效果上像是被撑开了。此方案浏览器兼容性很不错，唯一的缺陷是无法给容器设置max-height属性了，因为max-height只能限制内容高度，而不能限制 padding（因为max-width的成立条件是高度要由内容撑起），但是内容是被自身的padding撑起的，所以这时需要一个伪元素来充当这个模具。
.scale { width: 100%; position: relative; // overflow: hidden; 如果由margin撑起高度，则要考虑多个margin上下重叠问题，通过触发BFC来消除这一点}.scale:after { content: ''; display: block; padding-top: 20%; // 这里的比例是相当于模具元素自身来说的，由于宽高比是5:1，所以自身宽度比上伪元素的padding-top也应该是5:1，所以这里要设为 100%/(5/1) 为20%；}.banner { position: absolute; width: 100%; left: 0; top: 0;}