contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none

被替换的内容将保持其原有的尺寸。

scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

object-fit 详解的更多相关文章

  1. 【转载】html中object标签详解

    [转载自http://blog.csdn.net/soliy/archive/2010/03/22/5404183.aspx] html标签之Object标签详解 作者:网络    出处:网络     ...

  2. Vue不兼容IE8原因以及Object.defineProperty详解

    Vue不兼容IE8原因以及Object.defineProperty详解 原因概述: Vue.js使用了IE8不能模拟的ECMAScript5特性. Vue.js支持所有兼容ES5的浏览器. Vue将 ...

  3. JAVA中Object类方法详解

    一.引言 Object是java所有类的基类,是整个类继承结构的顶端,也是最抽象的一个类.大家天天都在使用toString().equals().hashCode().waite().notify() ...

  4. java的object类函数详解

    1．clone方法(浅拷贝) 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否则抛出CloneNotSupportedException异常. 主要是JAVA里除了8种 ...

  5. html中object标签详解

        定义和用法 object标签定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. &l ...

  6. html标签之Object标签详解

    定义和用法 定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. <object> ...

  7. @synchronized (object)使用详解

    synchronized关键字代表这个方法加锁,相当于不管哪一个线 程A每次运行到这个法时,都要检查有没有其它正在用这个方法的线程B(或者C D等),有的话要等正在使用这个方法的线程B(或者C D)运 ...

  8. Java提高学习之Object类详解（1）

    转自:http://www.importnew.com/10304.html 问:什么是Object类? 答:Object类存储在java.lang包中,是所有java类(Object类除外)的终极父 ...

  9. Java常用类（一）之Object类详解

    大家都知道Object是所有类的父类,任何类都默认继承Object 理论上Object类是所有类的父类,即直接或间接的继承java.lang.Object类.由于所有的类都继承在Object类,因此省 ...

  10. ES6之Object.assign()详解

    译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Funde ...

随机推荐

  1. 发布jar包到服务器读取resource目录下文件

    * 解决:当项目打包成jar之后resources路径下面的证书文件访问不到* 思路:* 1.运行时先复制一个jar* 2.将复制的jar解压到jar文件目录* 3.删除复制的jar跟解压的非证书文件 ...

  2. 解决Maven的JDK版本问题

    在pom文件中添加以下代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...

  3. 循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  4. 2020云栖大会智慧出行专场：聚焦高精地图/算法、智能模型、自动驾驶、AR导航

    2020云栖大会将于9月17日-18日在线举行,届时将通过官网为全球科技人带来前沿科技.技术产品.产业应用等领域的系列重要分享.   阿里巴巴高德地图携手合作伙伴精心筹备了“智慧出行”专场.我们将为大 ...

  5. Web开发初探（系统理解Web知识点）

    一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...

  6. White Bird(AOJ 2308)

    原题如下: Angry Birds is a mobile game of a big craze all over the world. You were convinced that it was ...

  7. [CF664A]Complicated GCD（数论）

    题目链接 http://codeforces.com/problemset/problem/664/A 题意 给两个数,找出它们的最大公因子d,使得从a到b之间的数都可以整除d. 题解 结论: 当gc ...

  8. Bootstrap一周学习小结

    一.响应式布局 1.bootstrap是自适应mobile和web,会根据分辨率大小而自适应的一个代码库,Bootstrap定义了很多js和css的效果,把这些效果集成为多个API,供在使用时调用. ...

  9. SSO单点登录可以自己实现吗？--开源软件诞生10

    ERP与SSO的恩怨情仇--第10篇 用日志记录“开源软件”的诞生 赤龙 ERP 开源地址: 点亮星标,感谢支持,与开发者交流 kzca2000 码云:https://gitee.com/redrag ...

  10. 知识全聚集 .Net Core 技术突破 | 如何实现一个模块化方案一

    简介 模块化的介绍一共2篇 这一篇我们实现一个功能非常简单的StartupModules模块化. 第二篇我们来实现一个ABP的模块化效果. 思考 其实来简单想一下模块化的实验思路,写个接口=>模 ...