模块、图片、背景图片、视频等响应式（宽高等比缩放）布局
网页布局里很多地方需要宽高等比缩放功能，例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化，高度自适应，这样才不会让轮播里面的图片压缩变形，顶多就是放太大而变模糊。
之前同事的办法，是用一个透明的图片占位符，此图片的大小是需要的比例。例如2：1就把占位符做成2px1px，例如5：3就把占位符做成5px3px。然后放入img标签里，设置宽度100%，这样高度就自动撑开，进而撑开外层父div。img平级放个子div，相对父div绝对定位，宽高100%，这样子div的大小就和img一样大，实现等比缩放了。见→DEMO1←方法1（建议缩小窗口查看效果）。
但这个方法有个最大弊端，img标签的大小，得里面的图片占位符解析出来，才可以撑开父div。这就导致网页一打开时，父div高度为0，等到图片占位符解析完毕后，父div才得以撑开，所以网页会闪动，体验不好，也会影响js的计算模块高度等问题。
下面是群友提供的另外一种办法，利用padding取值百分比来做：垂直方向的padding取值使用百分比时，其值是相对于本模块的宽度（怪异模式盒子模型），而W3C的解释是：基于父对象总高度或宽度的百分比。大家看哪种好理解就理解哪个吧。提供一个→DEMO2←大家看看这个有趣的现象（建议缩小窗口查看效果）。
根据padding的这个有趣现象，可以用伪类来撑开外层容器，轻松实现等比缩放模块、图片、背景图片、视频等，见→DEMO3←方法2（建议缩小窗口查看效果）。
参考资料：
录gif图片工具：