css巧妙设置等比例图片显示

比如我们经常会用到5:3,4:3等图片比例作为缩略图

那么在列表显示的时候，如何保持这个比例，很简单，我们首先把3/5=0.6,那么比例就是0.6.
比例500:300

image.png

<li class="col-12 col-sm-6 col-lg-3 col-xs-3">
                                    <div class="img">
                                        <img src="https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAFRnhiclWJxd81qhiauZY3xNlbn3Mze2rJd9x7dmeLJC0vQzicbyz2dXsALS8cIX2gMM/356"
                                             alt="">
                                    </div>
                                    <div class="title-box">
                                        <div class="title overflow-hidden">
                                            <h3>
                                                <a href="">
                                                    Web前端开发之html5/css3/jquery #11
                                                </a></h3>
                                        </div>
                                        <div class="info ">
                                            <dl class="flex line-22 m-b-5 ">
                                                <dd class="w-7 ">
                                                    <img src="https://avatars2.githubusercontent.com/u/10093884?s=64&v=4"
                                                         class="user-img" alt="">

                                                    <span class="into-name">黑背课堂</span>
                                                </dd>
                                                <dd class="w-3 text-right">
                                                    290人学习
                                                </dd>
                                            </dl>

                                            <dl class="flex">
                                                <dd class="w-4">
                                                    <span class="badge badge-primary">Laravel</span>
                                                </dd>
                                                <dd class="w-6 text-right comment">

                                                    <span class="fa fa-eye"></span> <span class="m-1">220</span>
                                                    <span class="fa fa-comments"></span> <span class="m-1">120</span>

                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </li>

css关键部分就是.img,less写法

   .img {
                position: relative;
                padding-bottom: 60%;
                img
                {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

类推，如果是5:4，那么就是0.8，

   .img {
                position: relative;
                padding-bottom: 80%;
                img
                {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }