其实这个比例缩放的关键是.scale这个元素，因为它的padding-bottom有宽高联动的作用，所以让这个元素成为一个模具，让需要缩放的元素加载到这个模具中，并且宽度和高度随模具变化。就可以达到按比例缩放的效果。Moldpadding-bottom:20%是父元素宽度的20%。同时设置宽度：100%。实际上，padding-bottom遵循宽度的大小比例。我们可以让padding-bottom来支撑元素的高度，所以height:0就是把元素的高度完全交给padding-bottom。高度（padding-bottom）和宽度（width）保持一定的比例，剩下的注入目标元素进模具就可以了。.scale{宽度：100%；//100%的宽度同步父元素的宽度，以适应外部元素的宽度。底部填充：20%；//padding-bottom的取值受父元素宽度的影响，取值为一半时，20%就是相对于父元素宽度的20%。其实宽高自适应等比主要是为了保证一定的宽高比。利用padding-bottompercentage这个特性可以实现宽高的联动。高度：0；//设置为0，这样padding-bottom可以支撑高度position:relative;//让元素成为一个可以按比例缩放的“模具”，让子元素的宽高跟随元素的变化，这样子元素就可以实现按比例缩放。.banner{位置：绝对；//跟随父元素“mold”width:100%;//跟随模板的宽度height:100%;//跟随模板的高度background-color:499e56;}}max-width虽然容器中内容的高度为0，但是因为与内容宽度一致的padding，整体视觉效果好像被拉伸了一样。该方案的浏览器兼容性非常好。唯一的缺陷是容器不能设置max-height属性，因为max-height只能限制内容的高度，不能限制padding（因为max-width的成立条件是高度必须是由内容决定的.撑起来),但是内容是靠自己的padding撑起来的,所以这时候就需要一个伪元素来充当模具..scale{宽度：100%；位置：相对；//溢出：隐藏；如果高度由margin支撑，就要考虑多个margin上下重叠的问题，可以通过触发BFC消除}.scale:after{content:'';显示：块；顶部填充：20%；//这里的比例相当于模具元素本身的比例。由于纵横比是5:1，所以本身的宽度大于伪元素的padding-top也应该是5:1，所以这里应该设置为100%/(5/1)为20%;}.banner{位置：绝对；宽度：100%；左：0；顶部：0；}