该 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. 【三分】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) B. The Meeting Place Cannot Be Changed

    三分显然,要注意EPS必须设成1e-6,设得再小一点都会TLE……坑炸了 #include<cstdio> #include<algorithm> #include<cm ...

  2. 【二维莫队】【二维分块】bzoj2639 矩形计算

    <法一>二维莫队,对n和m分别分块后,对块从上到下从左到右依次编号,询问以左上角所在块编号为第一关键字,以右下角标号为第二关键字排序,转移时非常厉害. O(q*n*sqrt(n)). #i ...

  3. 【树上莫队】【带修莫队】bzoj3052 [wc2013]糖果公园

    #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...

  4. Exercise03_01

    import javax.swing.JOptionPane; public class TheDirection { public static void main(String[] args){ ...

  5. linux tail 命令详解!Linux 文件内容查看工具介绍

    转:http://blog.csdn.net/carzyer/article/details/4759593 1.cat 显示文件连接文件内容的工具: cat 是一个文本文件查看和连接工具.查看一个文 ...

  6. Anaconda 介绍及安装

    一.前言 Python易用,但用好却不易,其中比较头疼的就是包管理和Python不同版本的问题,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython ...

  7. Spark Streaming从Flume Poll数据案例实战和内幕源码解密

    本节课分成二部分讲解: 一.Spark Streaming on Polling from Flume实战 二.Spark Streaming on Polling from Flume源码 第一部分 ...

  8. vue总结介绍

    转自(https://zhuanlan.zhihu.com/p/23078117) 模板语法 Vue 提供了一堆数据绑定语法. {{ text }} 文本插值 <div v-html=" ...

  9. 【測试工具】一个将Unix时间转换为通用时间的工具

    一个将Unix时间转换为通用时间的工具 演示效果: 点击转换之后变为: 源码: function calctime2(){ var time = window.document.getElementB ...

  10. yum是什么?(linux命令)

    一. yum是什么 yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它能便于管理大量系统的更新问题 注 ...