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

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

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

image.png

                                    

                                        
                                    
                                    

                                        

                                            

                                                
                                                    Web前端开发之html5/css3/jquery #11
                                                
                                        
                                        

                                            

                                                

                                                    

                                                    黑背课堂
                                                
                                                

                                                    290人学习
                                                
                                            

                                            

                                                

                                                    Laravel
                                                
                                                


                                                     220
                                                     120

                                                
                                            
                                        
                                    
                                

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