该 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. Java如何实现系统监控、系统信息收集(转

    Java如何实现系统监控.系统信息收集.sigar开源API的学习 系统监控(1) Jar资源下载:http://download.csdn.net/detail/yixiaoping/4903853 ...

  2. 1.3(学习笔记)JSP(Java Server Pages)内置对象

    一.内置对象 内置对象又称内建对象.隐式对象,是由服务器自动创建实例化的, 用户在使用时不需要显示的创建,可直接使用. jsp内置对象名称,类型及作用域 Scope代表该内置对象的作用范围,page表 ...

  3. Scala高手实战****第20课:Scala提取器、注解深度实战详解及Spark源码鉴赏

    Spark中的源码的提取器和注解 @SparkContext.scala @ volatile 线程专用 保证线程间共享内容的一致性 @volatile private var _dagSchedul ...

  4. 在sublime执行自定义脚本

    [背景] 一般项目都会有一个预处理的脚本, 在发布,或者预览效果的时候,往往要先执行脚本. 想法来自editplus 习惯了editplus的同学,都知道,可以配置自定义执行的脚本. 一般我会把它配置 ...

  5. 在WPF 4.5中跨线程更新集合

    WPF中一个非常强大的功能是数据绑定,我们可以把一个集合绑定到ListBox中,当集合的数据发生变更时,ListBox界面也会同步变更.本身这是一个非常美好的事情,但是美中不足的是:当把集合绑定到Li ...

  6. CentOS6 安装golang

    CentOS6 安装golang 下载 wget http://golangtc.com/static/go/1.8/go1.8.linux-amd64.tar.gz 1 1 1 解压 tar -xz ...

  7. js调试方法

    参考:1.https://developers.google.com/web/tools/chrome-devtools/javascript/ 2.https://developers.google ...

  8. iOS:实现图片的无限轮播

    为尊重原创,特注明原文链接:http://m.myexception.cn/operating-system/1949043.html 图片轮播及其无限循环效果 平时APP中的广告位或者滚动的新闻图片 ...

  9. 【Hadoop】HDFS源码解读

    1.open流程 2.get DFS流程: 3.获取block信息流程

  10. poj_1284_原根

    一開始看题的时候第一想法就是暴力,可是无奈数据量有点大,看了题解之后才知道原来牵扯到数论上的一个叫做原根的东西,这个题的题意就是,给你一个奇素数,问题他的原根有多少.依据初等数论上所说,此时牵扯到了三 ...