容器按比例缩放

​ 在响应式布局的网页中，要兼容移动端经常要将PC端左右排列的模块变成100%，如果单纯的图片还好，直接设置成width:100%高度会自动进行缩放，但是图片外面基本都有一个容器，这个容器是不会自动缩放的，今天终于看到一个办法可以让容器进行缩放：

思路：

将图片外面的容器宽带设置为100%，高度设置为0，然后设置padding-top或padding-bottom，让padding属性来撑开容器，由于padding属性是相对于外部容器尺寸的，所以就会让这个容器保持宽高比！真的很强大的思路，具体代码如下：

.wrap
{
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 55%; //这个就是图片的宽高比
}
.wrap img
{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}