该 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. [CF480E]Parking Lot

    题意:给一个$n\times m$的网格,初始时有些地方不能选,给$k$个询问$(x,y)$,每次令$(x,y)$不能选,然后询问最大子正方形的边长 如果按原题来做,禁止选一个点对答案的影响是极其鬼畜 ...

  2. 【旋转卡壳】poj3608 Bridge Across Islands

    给你俩凸包,问你它们的最短距离. 咋做就不讲了,经典题,网上一片题解. 把凸包上的点逆时针排序.可以取它们的平均点,然后作极角排序. 旋转卡壳其实是个很模板化的东西…… 先初始化分别在凸包P和Q上取哪 ...

  3. 【递归】【栈】先修课 计算概论(A)/函数递归练习(2)5:布尔表达式

    总时间限制: 1000ms 内存限制: 65536kB 描述 输入一个布尔表达式,请你输出它的真假值. 比如:( V | V ) & F & ( F | V ) V表示true,F表示 ...

  4. sql-server-linux 官网

    https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-overview

  5. [转]C++中关于new和delete的使用

    转载的地址 近一直在啃 C++ Primer 中文版第4版,发现 C++中new和delete应用遍布全书,现对其使用作简单总结.在C++中,可以使用new和delete动态创建和释放数组或者单个对象 ...

  6. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:3.安装Oracle RAC-3.1.安装并配置ASM驱动

    3.1.安装并配置ASM驱动 3.3.1.检查内核 [root@linuxrac2 etc]# uname -r 2.6.18-164.el5 下载以下rpm包(注意rpm包版本和Linux内核版本一 ...

  7. 项目笔记:导出Excel功能

    1.前台这块: var ids=""; $.post("${basePath}/assets/unRegDeviceAction_getDeviceIds.do" ...

  8. 【proxy agent资料】

    参考资料: GoAgent使用方法, 2015年最新FQ方法总结:http://www.bianlei.com/we-wanna-see-the-world/ 配置Android支持GAE Proxy ...

  9. MapReduce初学习

    内容来源,工具下载:点此链接  点此链接 Mapreduce概述: MapReduce是一种分布式计算模型,主要用于搜索领域,解决海量数据的计算问题.MR是由两个阶段组成,Map和Reduce,用户只 ...

  10. MS project 使用小技巧收集

    如何使用的url: http://www.cnblogs.com/wangfupeng1988/p/3648994.html  (好文,易上手) 一.  如何设置周末为工作日. 1. 在 “工具”-& ...