PROMULGATOR

    LJL

    上海市
    Html
    Css
    Js

    
                        


                        

                            


.box {
	width:100%;
}
.zoomImage {
	float:left;
	width:40%;
	height:0;
	margin:0 20px 20px 0;
	padding-bottom:100%;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
纯css实现图片比例缩放自动裁剪

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
样式中的上面四句主要目的是为了让这个div以1：1的大小呈现， 虽然height：0；高度为0，但是它的padding值为100% 这是因为在padding为百分比的时候，是根据他父层的宽度来进行计算的。
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
后面5句就是利用了css3中的 background-size:cover 的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

                         

                     

                   
                


                
0