CSS容器按比例缩放

常见的容器的宽高比例是16：9或者是4：3，比如说一张图片，我们只设置宽和高中的任意一个值，另外一个值就会根据原来图片的比例自动进行缩放，使得调整后的图片仍然保持与原图片相同的比例。

上面的方式都是在知道宽或者高的情况下，如果宽和高都不知道的情况下，如何保证容器按比例缩放呢？

方法如下所示：

.container{
    height: 0;
    padding-bottom: 56.25%;  /* 16:9 */
    position: relative;
    width: 100%;
}
.container .item{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

小结（非常重要）：核心思想使用padding来撑开容器大小，所以设置height为0，上面用的是padding-bottom, 用padding-top的效果是一样的，padding-bottom设置为百分数是以容器的宽度width为参考的，而不是高度height；所以父容器的宽高比例16：9正好是56.25%：100%；父容器采用相对定位，以方便子容器item以父容器为参照物进行绝对定位，之后将子容器的宽高充满整个父容器，故宽高设置为100%，即可达到按16：9比例缩放的效果。 

根据上面的原理，要想编写其他容器比例，修改父容器中的padding-bottom和width的比例即可！！

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！