📜  CSS |对象适合属性

📅  最后修改于: 2021-11-06 11:41:34             🧑  作者: Mango

它是一个 CSS 属性,用于指定应如何调整图像或视频的大小以适合其内容框。

句法:

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

属性值:

  • 填充:这是一个默认值。被替换的图像被拉伸以适合内容框。替换后的图像将完全填充框而不管其纵横比。

    句法:

    object-fit: fill;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
    
      
    
    

    输出:

  • 包含:替换的图像保留原始图像的纵横比,同时适合内容框。

    句法:

    object-fit: contain;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
      
    
      
    
    

    输出:

  • cover:此值还保留原始图像的纵横比,即在适合内容框时被替换的图像。有时,当原始图像的纵横比与内容框的纵横比不匹配时,它会被裁剪以适应。

    句法:

    object-fit: cover;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
    
      
    
    

    输出:

  • none:替换后的图像将忽略原始图像的纵横比。因此,它不会调整大小。

    句法:

    object-fit: none;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
    
      
    
    

    输出:

  • 缩小:被替换的图像被调整大小,就好像没有指定或包含一样,结果是最小的对象大小。

    句法:

    object-fit: scale-down;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
    
      
    
    

    输出:

  • initial: initial 设置默认值,即替换的图像被拉伸以适应内容框,因为默认值是填充。

    句法:

    object-fit: initial;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
      
        
    
      
    
    

    输出:

  • 继承:继承从父元素接收属性。当它与根元素一起使用时,将使用初始属性。

    句法:

    object-fit: inherit;

    例子:

    
    
      
    
        
            CSS | The object-fit Property
        
        
    
      
    
        
                 
           

    输出:

支持的浏览器: object-fit 属性支持的浏览器如下:

  • 谷歌浏览器
  • 火狐
  • 歌剧
  • 苹果浏览器