常见的容器的宽高比例是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的比例即可!!
本博客由博主原创,如需转载需说明出处!谢谢支持!