📌  相关文章
📜  如何使用 CSS 自动调整图像大小以适合 div 容器？

📅  最后修改于: 2021-08-30 10:44:26             🧑  作者: Mango

要自动调整图像或视频的大小以适合 div 容器，请使用 object-fit 属性。它用于指定图像或视频如何适合容器。

object-fit 属性：此属性用于指定图像或视频如何调整大小和适合容器。它告诉内容如何以各种方式适应特定的 div 容器，例如保持纵横比或拉伸并占用尽可能多的空间。

  • 示例 1：此示例描述了适合 div 容器的自动调整图像大小。此示例不包含 object-fit 属性。 
     
 
     
        
     
    
        
    
            
        
    
     
                    

    输出：

    在上面的例子中，由于没有使用 object-fit 属性，图像被挤压以适应容器，其原始纵横比被破坏。

  • 示例2：本示例用于在使用resize div 容器时显示图像的一部分。 
     
 
     
        
     
    
        
    
            
        
    
     
                    

    输出：

    注意：使用object-fit：cover；将切断图像的边，保留纵横比，并填充空间。

  • 示例 3：此示例不使用 object-fit 属性显示图像。在此示例中，图像的大小是手动设置的，并且在调整浏览器窗口大小时，图像将无法保持其纵横比并根据 div 容器调整或调整大小。 
     
 
 
     
 

    
 
                    

    输出：

  • 示例 4：此示例使用 object-fit 属性显示图像或图像的一部分。在此示例中，图像的大小是手动设置的，并且还使用了 object-fit 属性。在这种情况下，在调整浏览器大小时，图像将保持其纵横比并且不会根据 div 容器调整大小。 
     
 
     
         
     
    
        
     
                    

    输出：

    注意：属性object-fit：cover；将剪切图像的边，保留纵横比，并填充空间。