弹性盒子布局解决不规则图片的等比例缩放的利器!

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%;
        }
    }

 

以上是关于弹性盒子布局解决不规则图片的等比例缩放的利器!的主要内容,如果未能解决你的问题,请参考以下文章

解决 图片在div中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)

php等比例缩放图片及剪切图片代码

图片等比例自动拉伸缩放解决方案总结

PHP学习笔记:等比例缩放图片

图片加载防止窗口抖动,又可以等比例缩放

理解CSS3中的background-size(对响应性图片等比例缩放)