📜  如何使用 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;将剪切图像的边,保留纵横比,并填充空间。