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：从该元素的父元素继承属性




    




    




    




 。