网页布局里很多地方需要宽高等比缩放功能，例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化，高度自适应，这样才不会让轮播里面的图片压缩变形，顶多就是放太大而变模糊。
之前同事的办法，是用一个透明的图片占位符，此图片的大小是需要的比例。例如2：1就把占位符做成2px*1px，例如5：3就把占位符做成5px*3px。然后放入img标签里，设置宽度100%，这样高度就自动撑开，进而撑开外层父div。img平级放个子div，相对父div绝对定位，宽高100%，这样子div的大小就和img一样大，实现等比缩放了。见→DEMO←方法1（建议缩小窗口查看效果）。
但这个方法有个最大弊端，img标签的大小，得里面的图片占位符解析出来，才可以撑开父div。这就导致网页一打开时，父div高度为0，等到图片占位符解析完毕后，父div才得以撑开，所以网页会闪动，体验不好，也会影响js的计算模块高度等问题。
下面是群友提供的另外一种办法，利用padding取值百分比来做：垂直方向的padding取值使用百分比时，其值是相对于本模块的宽度（怪异模式盒子模型），而W3C的解释是：基于父对象总高度或宽度的百分比。大家看哪种好理解就理解哪个吧。提供一个→DEMO←大家看看这个有趣的现象（建议缩小窗口查看效果）。
根据padding的这个有趣现象，可以用伪类来撑开外层容器，轻松实现等比缩放模块、图片、背景图片、视频等，见→DEMO←方法2（建议缩小窗口查看效果）。
参考资料：
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
录gif图片工具：
http://www.cockos.com/licecap/
冲MM来的。
西门最近这里很冷清啊。
图片问题我基本全都使用background-size: cover来搞了，等比缩放裁切，非常爽-0-
最近接触到一个主题，也是这种设计，真心好看，方便用，让网站页面万变不离其“中”。
求主题地址，围观下
菜鸟路过 路上的以前用过一个主题 我找了好久
方法不错 下次试试
昨天就发现chrome和火狐对用了padding过后的max-width不一样。
有demo么？你说的这个挺有意思的
demo没有了。是前段时间我的相册页面设置了最大宽度，在chrome下正常，但是在火狐还有ie11下就会加上padding的宽度，图片也会超出。可能情况比较特殊。我直接用js把宽度定死了。
如果有demo可以一起研究一下，看是浏览器bug还是其他什么原因 😈