object-position和object-fit只针对替换元素有作用，也就是form表单家族控件系列，老牌劲旅img图片，HTML5新贵video视频等元素（一般有src属性的）。

一、object-fit理解

　 object-fit类似于CSS3 background-size，object-fit有五个属性值。

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }
每个属性值的具体含义如下：
  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

二、object-position理解

与background-position类似.

https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

CSS3 object-position/object-fit的更多相关文章

  1. HTTPResponse object — JSON object must be str, not 'bytes'

    http://stackoverflow.com/questions/24069197/httpresponse-object-json-object-must-be-str-not-bytes HT ...

  2. java之Thread.sleep(long)与object.wait()/object.wait(long)的区别(转)

    一.Thread.sleep(long)与object.wait()/object.wait(long)的区别sleep(long)与wait()/wait(long)行为上有些类似,主要区别如下:1 ...

  3. Map<String, Object>转Object,Object转 Map<String, Object>

    Map转Object import com.alibaba.fastjson.JSON; Map<String, Object> boneAgeOrderMap=boneAgeOrderS ...

  4. 小tips：JS中this操作执行像(object.getName = object.getName)()操作改变了this

    var name = "The window"; var object = { name: "My Object", getName: function(){ ...

  5. 论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别

    前不久,一朋友求助,让我给解释一波Object.keys(), Object.getOwnPropertyNames(), for in的区别,面试中好几次呗问了.所以,抽了点时间看了看,大概把我看的 ...

  6. 自定义规则，对List<Map<String,Object>> List<Object>进行排序

    package lltse.java.collection; import java.util.ArrayList; import java.util.Collections; import java ...

  7. 关于 warning CS0659:“***”重写Object.Equals(object o)但不重写Object.GetHashCode()

    对象相等性和同一性 System.Object 类型提供了以下方法, namespace System { // // 摘要: // 支持 .NET Framework 类层次结构中的所有类,并为派生 ...

  8. java之Thread.sleep(long)与object.wait()/object.wait(long)的区别及相关概念梳理（good）

    一.Thread.sleep(long)与object.wait()/object.wait(long)的区别sleep(long)与wait()/wait(long)行为上有些类似,主要区别如下:1 ...

  9. js中[object Object]与object.prototype.toString.call()

    最近在用node读取文件中的json数据后,用JSON.parse()转成了json,然后响应数据传给前端,发现输出值object对象时显示[object object],在这里我们来看一下他的具体意 ...

  10. js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class

    https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...

随机推荐

  1. 【leetcode】1006. Clumsy Factorial

    题目如下: Normally, the factorial of a positive integer n is the product of all positive integers less t ...

  2. cocos2D-X 屏幕适配

    { //https://v.youku.com/v_show/id_XNTIzOTM1MDYw.html }

  3. Android中通过进程注入技术修改广播接收器的优先级

    前言 这个周末又没有吊事,在家研究了如何通过进程的注入技术修改广播接收器的优先级,关于这个应用场景是很多的,而且也很重要,所以就很急的去fixed了. Android中的四大组件中有一个广播:Broa ...

  4. JVM 和JMM的区别

    首先从定义上看 JVM (Java Virtual Machine)Java虚拟机模型 主要描述的是Java虚拟机内部的结构以及各个结构之间的关系. JMM(Java Memory Model) Ja ...

  5. ZROI week3

    作业 poj 1091 跳蚤 容斥原理. 考虑能否跳到旁边就是卡牌的\(gcd\)是否是1,可以根据裴蜀定理证明. 考虑正着做十分的麻烦,所以倒着做,也就是用\(M^N - (不合法)\)即可. 不合 ...

  6. python中匿名函数lambda如何用

    python中经常用到的一个函数:匿名函数lambda ,什么是匿名函数?匿名函数的意义是什么?匿名函数怎么样用?(疑问三连,what,why,how) 一,什么是匿名函数? python中没有名字的 ...

  7. python selenium 自动化流程的一些总结与思考

    首先要考虑的项目为什么要做自动化测试?(主要从自动化测试的优点着手) 其次是什么项目才适合做自动化测试? 自动化测试覆盖率要达到什么样的程度?因为都知道不可能达到100%的,不然脚本太臃肿,反而会失去 ...

  8. php中的list()

    list()在php中上一个语言结构,并不是一个函数.类似array(),不过array()这个东西我们现在一般很少使用了,因为从php5.4版本开始,我们会直接使用[]来定义数组. 那么,list( ...

  9. USB仪器控制教程

    概观 本教程是为出发点使用NI-VISA与USB设备进行通信.它不打算作为一个起点,学习USB构架或USB通讯中使用的各种协议.阅读本教程后,您应该能够安装一个USB设备,并使用NI-VISA与该设备 ...

  10. 更改package.js后重新加载

    node --save可有省略掉手动修改package.json的步骤   当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name), ...