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

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

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
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. [CF414E]Mashmokh's Designed Problem

    题意:给一棵树,有三个操作:①询问两点$(x,y)$之间的距离②把$x$和原来的父亲断开并连到它的$h$级祖先,作为新父亲最右的儿子③询问与根节点距离为$k$的点中最右的点是哪个点 用出栈入栈序$s_ ...

  2. Delphi 目前使用delay函数功能

    procedure sdfg.iTimers1Timer4(Sender: TObject);var vsub : Cardinal; vSetinterval: Cardinal;begin vsu ...

  3. 《VC++就业培训宝典之MFC视频教程》学习笔记

    开发环境:Win7 64位 + VS2013 第三章第二节视频 在Win32工程中学习MFC开发,编译问题: Building MFC application with /MD[d] (CRT dll ...

  4. xargs: How To Control and Use Command Line Arguments

    参考: http://www.cyberciti.biz/faq/linux-unix-bsd-xargs-construct-argument-lists-utility/ http://linux ...

  5. md5代码实现

    参考: 1.http://blog.csdn.net/iaccepted/article/details/8722444 2.http://hi.baidu.com/gh0st_lover/item/ ...

  6. 关于yum的一些安装问题

    最近折腾CentOS和kubernetes,遇到一些安装问题,把和yum相关的逐步总结如下: 如何用本地的cdrom作为yum源 mount /dev/cdrom /mnt 先查询是否安装了creat ...

  7. 函数指针&指针函数

    https://blog.csdn.net/luoyayun361/article/details/80428882

  8. [转载]Ubuntu 14.04中root 密码忘记解决方法

      Ubuntu 14.04中root 密码忘记解决方法 方法一: 如果用户具有sudo权限,那么直接可以运行如下命令: #sudo su root #passwd #更改密码 或者直接运行sudo ...

  9. ISP图像调试工程师——3D和2D降噪(熟悉图像预处理和后处理技术)

    2D降噪:只在2维空间域上进行降噪处理.基本方法:对一个像素将其与周围像素平均,平均后噪声降低,但缺点是会造成画面模糊,特别是物体边缘部分.因此对这种算法的改进主要是进行边缘检测,边缘部分的像素不用来 ...

  10. Vue组件开发实例(详细注释)

    Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...