CSS 对象适合(object-fit)

• 

  CSS对象适合

  CSS object-fit属性用于指定如何调整<img>或<video>的大小以适合其容器。

• 

  浏览器支持

  属性	Internet Explorer	Chrome	FireFox	Safari	Opera
  属性名称
  object-fit	16.0（含）以上	31.0（含）以上	36.0（含）以上	7.1（含）以上	19.0（含）以上

• 

  CSS object-fit属性

  CSS object-fit属性用于指定如何调整<img>或<video>的大小以适合其容器。此属性告诉内容以各种方式填充容器; 例如“保持纵横比”或“伸展并占用尽可能多的空间”。请看以下图像，即400x300像素：

  

  但是，如果我们将上面的图像设置为200x400像素，它将如下所示：

  

  img {
                    width: 200px;
                    height: 400px;
                  }

  尝试一下

  我们看到图像被挤压以适应200x400像素的容器，并且其原始宽高比被破坏。如果我们使用object-fit: cover;它将切断图像的两侧，保留纵横比，并填充空间，如下所示：

  

  img {
                    width: 200px;
                    height: 400px;
                    object-fit: cover;
                  }

  尝试一下

  这里我们有两个图像，我们希望它们填充50％浏览器窗口的宽度和100％的高度。在以下示例中我们不使用object-fit，因此当我们调整浏览器窗口大小时，图像的宽高比将被破坏：

  

  尝试一下

  在下一个示例中，我们使用object-fit: cover;，因此当我们调整浏览器窗口的大小时，会保留图像的宽高比：

  

  尝试一下
• 

  CSSobject-fit属性的所有值

  object-fit属性可以具有以下值：

  • fill - 这是默认值。替换的内容大小适合填充元素的内容框。如有必要，物体将被拉伸或压扁以适合
  • contain - 缩放替换的内容以在适合元素的内容框时保持其宽高比
  • cover - 替换内容的大小可以在填充元素的整个内容框时保持其宽高比。该对象将被裁剪以适合
  • none - 替换的内容未调整大小
  • scale-down - 内容大小，如同指定none或contains（将导致较小的具体对象大小）

  以下示例演示了该object-fit属性的所有可能值：

  .fill {object-fit: fill;}
                  .contain {object-fit: contain;}
                  .cover {object-fit: cover;}
                  .scale-down {object-fit: scale-down;}
                  .none {object-fit: none;}

  尝试一下