CSS之容器按比例缩放

1.对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放

图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上

2.但跟pc的不一样，移动端的图片很多都不是固定的宽高的（icon图标与头像等一些小图还是固定大小的），所以就面临一个问题：不能设置一个具体的高度，于是就会出现加载过程其他内容随着图片的加载慢慢向下移动

我们怎么确定容器的高度，从而消除慢慢向下加载的影响呢？

首先必须设置height为0，按照浏览器从上而下、从外到内的渲染机制，首先父容器的高度为0，而父容器的宽度就是图片的宽度，再根据百分比padding-top等比例设置父容器的高度，最后再渲染子元素图片让其百分百充满父容器。这样就会保证在图片宽度任意变化的情况下，高度仍然是等比例的，所以不仅保证了外层容器的宽高比还撑开了容器，最后使用图片绝对定位设置宽高100%即可实现按照比例缩放

放在移动端，假设先设置外层容器宽度为50%，随着用户缩放屏幕容器宽度改变，则外层容器的高度按照比例缩小，这样就能保证容器的自适应显示

实例：