弹性盒子布局解决不规则图片的等比例缩放的利器!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性盒子布局解决不规则图片的等比例缩放的利器!相关的知识,希望对你有一定的参考价值。
我们经常遇到这种需求:
在一个固定大小(固定比例)的容器里面展示图片,图片的大小比例都不是固定的,需要按容器的比例等比例缩图片上下左右居中显示。
在没有弹性盒子布局的年代,额的做法:
1:水平居中,非常好解决,容器 text-align: center;
2:垂直居中,容器display: table-cell; 图片vertical-align: middle;
3:等比例缩放,js解决,思路:
(1)如果图片宽高都没有超过容器大小,则忽略
(2)如果图片的宽度或者高度其中有一方超过容器大小,则固定没超过的,缩放超过的
(3)如果图片宽度和高度都超过容器大小,则先缩放宽度到容器宽度,如果等比例缩放的高度没超过容器的高度则完美,如果超过则缩放高度到容器高度,再计算宽度。。。
炒鸡麻烦有木有!
而现在有了弹性盒子布局,零JS代码纯CSS实现以上效果,在弹性盒子布局里面,容器会自动判断子是否超过了大小,如果超过会自动按照以上规则进行缩放,什么水平居中垂直居中也是小case,简直爽到爆!
.container { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; background: #000; img { width: 100%; } }
以上是关于弹性盒子布局解决不规则图片的等比例缩放的利器!的主要内容,如果未能解决你的问题,请参考以下文章