CSS object-fit属性



  • 定义和用法

    object-fit属性用于指定应如何调整<img><video>以适合其容器。此属性告诉内容以各种方式填充容器; 例如“保持纵横比”或“伸展并占用尽可能多的空间”。
    特征 说明
    默认值 ?
    继承 没有
    动画 没有。CSS动画参考
    CSS版本 CSS3
    JavaScript语法 object.style.objectFit="cover"尝试一下
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    属性 IE/Edge Chrome FireFox Safari Opera
    属性名称
    object-fit 16.0+ 31.0+ 36.0+ 7.1+ 19.5+
  • CSS语法

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

    剪掉图像的边,保留纵横比,并填充空间:
    img.a {
     width: 200px;
     height: 400px;
     object-fit: cover;
    }
    
  • 属性值

    属性值 描述
    fill 这是默认的。 替换的内容大小适合填充元素的内容框。 如有必要,物体将被拉伸或压扁以适合
    contain 替换的内容被缩放以在适合元素的内容框时保持其纵横比
    cover 替换内容的大小可以在填充元素的整个内容框时保持其宽高比。 该对象将被裁剪以适合
    none 替换的内容未调整大小
    scale-down 内容的大小就像没有指定或包含(将导致较小的具体对象大小)
    initial 将此属性设置为其默认值。查看initial关键字
    inherit 从其父元素继承此属性。查看inherit关键字
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS对象适合