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. [译]如何在ASP.NET Core中实现面向切面编程(AOP)

    原文地址:ASPECT ORIENTED PROGRAMMING USING PROXIES IN ASP.NET CORE 原文作者:ZANID HAYTAM 译文地址:如何在ASP.NET Cor ...

  2. JS 进制转换的理解

    该事情的由来是来自于一个面试题,题目是这样的,[1,2,3].map(parseInt)的结果是什么? 作为菜鸟的我们一定是觉得分别把1,2,3分别交给parseInt,无非就是1,2,3嘛.其实结果 ...

  3. Oracle12C创建视图权限不足

    授权: GRANT CREATE VIEW TO c##scott; 作者:彼岸舞 时间:2020\06\23 内容关于:Oracle 本文属于作者原创,未经允许,禁止转发

  4. 在logback的fileNamePattern配置%i 带来的异常

    我在logback的配置文件中企图这样配置: <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPol ...

  5. Life is not the amount of breath you take.

    It's the moments that take you breath away.

  6. Netty进阶和实战

    实现UDP单播和广播 UDP 这样的无连接协议中,并没有持久化连接这样的概念,并且每个消息(一个UDP 数据报)都是一个单独的传输单元.此外,UDP 也没有TCP 的纠错机制. 通过类比,TCP 连接 ...

  7. C# 调用SendMessage刷新任务栏图标(强制结束时图标未消失)

    本文参考C++改写 https://blog.csdn.net/dpsying/article/details/20139651  (该文章的坐标理解的有误解,会导致功能无效) SendMessage ...

  8. 关于h5游戏开发，你想了解的一切都在这儿！

    ​2020年,受疫情影响,线下产业红利褪去,线上迎来的新一轮的高峰.众多商家纷纷抓住了转型时机,开启了流量争夺战.H5游戏定制无疑是今年引流的大热门.如何开发一款有趣.有爆点.用户爱买单的好游戏呢? ...

  9. windows上部署rabbitmq遇到的一些问题及解决方法

    在目前这家公司,刚进公司的时候接手了一个服务,算是个比较完备的服务,其中几台电脑之间通信用到了rabbitmq,一开始没出什么问题,然后后来勒索病毒wanner cry来的时候,系服把所有服务器装了一 ...

  10. [翻译] 发布双屏预览SKD，公布MICROSOFT 365开发者日日期

    [前置提示]:本文翻译工作尚未完工,您可以先看原文QUQ 原文标题:Announcing dual-screen preview SDKs and Microsoft 365 Developer Da ...