Tailwind CSS 对象拟合

此类在顺风 CSS 中接受多个值。所有属性都以类的形式涵盖。它是 CSS object-fit 属性的替代方案。此类用于指定应如何调整图像或视频的大小以适合其内容框，以控制替换元素的内容调整大小。

对象拟合类：

• 对象包含
• 对象覆盖
• 对象填充
• 无对象
• 对象缩小

object-contain：此类替换图像保留原始图像的纵横比，同时适合内容框。调整元素内容的大小以保持包含在其容器中。

句法：

...

示例 1：

输出：

object-cover：该类在适合内容框的同时保留原始图像的纵横比作为替换图像。有时，当原始图像的纵横比与内容框的纵横比不匹配时，它会被裁剪以适应。使用此类调整元素内容的大小以覆盖其容器。

句法：

...

示例 2：

HTML

 
     
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS object Class 
    

        
  

 
  

输出：

object-fill：这个类替换的图像被拉伸以适合内容框。替换的图像将完全填满框，而无需考虑其纵横比。使用类拉伸元素的内容以适应其容器。

句法：

...

示例 3：

HTML

 
    
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS object Class 
    

        
  

 
  

输出：

object-none：在这个类中，被替换的图像将忽略原始图像的纵横比。因此，它没有调整大小。该类以原始大小显示元素的内容，而忽略容器大小。

句法：

...

示例 4：

HTML

 
    
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS object Class 
    

        
  

 
  

输出：

object-scale-down：此类替换的图像被调整大小，就好像没有指定或包含指定并导致最小的对象大小。该类以原始大小显示元素的内容，但将其缩小以适合其容器。

句法：

...

示例 5：

HTML

 
    
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS object Class 
    

    
    

 
  

输出：