img标签设置图片自适应（如何让img标签在父元素中自适应宽度或者高度，按比例显示）

自适应宽度

如果要让img标签在给定宽高的父元素中自适应    
    
    
    
    
 ，如果自适应宽就是

div { width: 300px; height: 300px; img { width: 100% }; }

自适应高度

如果要让img标签在给定宽高的父元素中自适应  


     


     


     


     


     ，如果自适应宽就是

div { width: 300px; height: 300px; img { height: 100% }; }

如果图片的大小不一


 




 




 




 




 




，想图片按比例显示在父元素中间   

   

   

   

   

，怎么办？

div { width: 300px; height: 300px; img { width: 100%; height: 100%; object-fit: contain; }; }

css样式属性 object-fit指定元素的内容应该如何去适应指定容器的高度与宽度    
    
    
    
    
 。一般用于 img 和 video 标签   

     

     

     

     

     ，一般可以对这些元素进行保留原始比例的剪切    
    
    
    
    
 、缩放或者直接进行拉伸等  


     


     


     


     


     。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

fill：默认值不保证保持原有的比例



  




  




  




  




  



，内容拉伸填充整个内容容器


 




 




 




 




 




。

contain：保持原有尺寸比例   

   

   

   

   

。内容被缩放   

     

     

     

     

     。

cover：保持原有尺寸比例



  




  




  




  




  



。但部分内容可能被剪切  


  


  


  


  


。

none：保留原有元素内容的长度和宽度  


  


  


  


  


，也就是说内容不会被重置    
     
     
     
     
    。

scale-down：保持原有尺寸比例




   




   




   




   




   


。内容的尺寸与 none 或 contain 中的一个相同    
     
     
     
     
    ，取决于它们两个之间谁得到的对象尺寸会更小一些 



 



 



 



 



。

initial：设置为默认值                            。

inherit：从该元素的父元素继承属性




    




    




    




    




    

。