HTML | DOM 样式 objectFit 属性

HTML DOM 中的Style objectFit属性用于设置或返回如何调整图像或视频元素的大小以适应其容器。

句法：

• 它返回 objectFit 属性。

  object.style.objectFit

• 它用于设置 objectFit 属性。

  object.style.objectFit = "contain|cover|scale-down|none|fill|
  initial|inherit"

属性值：

• 包含：缩放替换的内容以保持其纵横比，同时也适合内容框。

  示例 1：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'contain';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• 封面：被替换的内容被调整大小以在填充元素的整个内容框时保持其纵横比。如果需要，可以裁剪对象以适合内容框。

  示例 2：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'cover';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

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

  示例 3：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'scale-down';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• none：替换的内容不调整大小。

  示例 4：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'none';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• fill：调整内容大小以填充元素的内容框。这是默认值。

  示例 5：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
              object-fit: scale-down;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'fill';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• 初始值：用于将此属性设置为其默认值。

  示例 6：

    
  
      
        DOM Style objectFit Property
      
      
          #content {
              border: solid;
              height: 250px;
              width: 400px;
              object-fit: scale-down;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'initial';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• 继承：这从其父级继承属性。

  示例 7：

    
  
      
        DOM Style objectFit Property
      
      
          #parent {
              object-fit: contain;
          }
            
          #content {
              border: solid;
              height: 250px;
              width: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectFit Property
      
      
          
      
      
          Change objectFit
      
    
      
      
          function setObjectFit() {
              elem = document.querySelector('#content');
              elem.style.objectFit = 'inherit';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

支持的浏览器： objectFit属性支持的浏览器如下：

• 谷歌浏览器 31.0
• 浏览器 16.0
• 火狐 36.0
• 歌剧 19.0
• 苹果 Safari 7.1