该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

初始值 fill 
适用于 替换元素 
遗传 是 
媒体 视觉 
计算值 按规定 
动画类型 离散的 
为了规范 通过正规的语法定义的唯一无歧义的秩序 
/* 关键属性 */

  1. object-fit: fill;
  2. object-fit: contain;
  3. object-fit: cover;
  4. object-fit: none;
  5. object-fit: scale-down;
  • 1
  • 2
  • 3
  • 4
  • 5

/* 全局属性 */ 
object-fit: inherit; 
object-fit: initial; 
object-fit: unset; 
初始值 fill 
适用元素 replaced elements 
是否是继承属性 否 
适用媒体 visual 
计算值 as specified 
Animation type discrete 
正规顺序 the unique non-ambiguous order defined by the formal grammar 
句法

object-fit属性由下列的值中选择一个关键字来指定。

值 
fill 
被替换的内容的大小,以填补该元素的内容框:对象的具体对象的大小是元素的使用宽度和高度。 
contain 
被替换的内容的大小,为自身宽高比不变,适应该元素的内容框的大小:它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。 
cover 
被替换的内容的尺寸却使元件的整个内容框,以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。 
none 
被替换的内容的尺寸却使元件的整个内容框,以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。 
scale-down 
内容的尺寸仿佛none或contain指定了,取将导致更小的具体对象的大小。

obj-fit的更多相关文章

  1. Emsemble

    RM # -*- coding: utf-8 -*- """ RandomForestClassifier 예 """ import pan ...

  2. Classification

    kNN1 # -*- coding: utf-8 -*- """ kNN : 최근접 이웃 """ import numpy as np # ...

  3. sklearn的基本使用

    https://cloud.tencent.com/developer/news/58202 简介 今天为大家介绍的是scikit-learn.sklearn是一个Python第三方提供的非常强力的机 ...

  4. OBJ解析

    OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式,很适合用于3D软件模 ...

  5. 3D中的OBJ文件格式详解

    常见到的*.obj文件有两种:第一种是基于COFF(Common Object File Format)格式的OBJ文件(也称目标文件),这种格式用于编译应用程序:第二种是Alias|Wavefron ...

  6. OBJ文件

    OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式,很适合用于3D软件模 ...

  7. openGL加载obj文件+绘制大脑表层+高亮染色

    绘制大脑表层并高亮染色的工作是以openGL加载obj文件为基础的,这里是我们用到的原始程序:只能加载一个obj文件的demo. 然而,一个完整的大脑表层是由很多分区组成的,因此我们的程序需要支持两个 ...

  8. 3D中OBJ文件格式详解

    常见到的*.obj文件有两种:第一种是基于COFF(Common Object File Format)格式的OBJ文件(也称目标文件),这种格式用于编译应用程序:第二种是Alias|Wavefron ...

  9. obj.style.z-index的正确写法

    obj.style.z-index的正确写法 今天发现obj.style.z-index在js里面报错,后来才知道在js里应该把含"-"的字符写成驼峰式,例如obj.style.z ...

  10. CSharpGL(9)解析OBJ文件并用CSharpGL渲染

    CSharpGL(9)解析OBJ文件并用CSharpGL渲染 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo ...

随机推荐

  1. 【kruscal】【最小生成树】poj2421 Constructing Roads

    SB题,求最小生成树,其中有些边已经给您建好啦. 随意暴力即可. #include<cstdio> #include<algorithm> #include<cstrin ...

  2. 【线段树】bzoj3922 Karin的弹幕

    设置一个值K. d<=K:建立多组线段树:d>K:暴力. 最优时间复杂度的伪计算: O(n*K*logn(建树)+m*logn(询问类型1)+m*n/K(询问类型2)+m*K*logn(修 ...

  3. redis踩坑记

    本来打算给一批主库做从库,用来读取数据,还不想碰主库数据. 主库redis2.8.12,从库一开始没注意,docker了一个3.1的,结果slaveof之后命令不兼容,下了一个2.8的(2.8.23好 ...

  4. Scala实战高手****第4课:零基础彻底实战Scala控制结构及Spark源码解析

    1.环境搭建 基础环境配置 jdk+idea+maven+scala2.11.以上工具安装配置此处不再赘述. 2.源码导入 官网下载spark源码后解压到合适的项目目录下,打开idea,File-&g ...

  5. java获取桌面路径的方法

    FileSystemView fsv = FileSystemView.getFileSystemView(); File com=fsv.getHomeDirectory(); System.out ...

  6. iOS:App上架流程和支付宝支付流程

    App上架大致流程: 1.花99美元在苹果开发中心注册一个开发者账号: 2.登陆开发者账号,进入member Center,即开发者成员中心: 3.选取证书标示符(certificates Ident ...

  7. elasticsearch中的filter与aggs

    今天在ES上做了一个聚合,先过滤一个嵌套对象,再对另一个域做聚合,但是过滤似乎没有起作用 { "size":0, "filter":{ "nested ...

  8. Python 3 初探,第 2 部分: 高级主题

    Python 3 是 Guido van Rossum 功能强大的通用编程语言的最新版本.它虽然打破了与 2.x 版本的向后兼容性,但却清理了某些语法方面的问题.本文是这个由两部分组成的系列文章中的第 ...

  9. Linux——Ubuntu下Sublime Text 2的安装

    Sublime Text 2是一款共享软件,收费但可以永久免费试用的编辑器,价格是59个美刀,相信开发者一定不了解中国人,也不面对中国市场,.言归正传,ST2编辑功能强大,好评如潮,在Windows/ ...

  10. grid 布局 设置行列间距

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...