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. oracle trim无效？

    这里说说如果是全角空格怎么去除 方法一 trim(TO_SINGLE_BYTE('aaa')) 方法二 SELECT TRIM(replace('aaa',' ','')) FROM dual

  2. oracle的查询结果按照in条件顺序输出

    业务需要,通过lucene查出符合搜索条件的id,然后在详情表里查出这些id的详情 ? 1 SELECT id,QUESTION,QUESTIONCOMMENT FROM "ASKDBA_Q ...

  3. QTcpSocket学习

    一.涉及到的函数 监听:tcpServer->listen(QHostAddress::LocalHost, 6666) 错误信息:tcpServer->errorString() 新连接 ...

  4. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  5. configure: error: invalid variable name: `-prefix'

    configure: error: invalid variable name: `-prefix'其实就是写法的问题 正确写法 把prefix前面的"-"改成“--”

  6. PHP浮点计算结果返回异常问题

    php中如果直接小数点进行计算的话.比如16.8*3var_dump是50.4.但是return就变成了50.400000000000006.至于是什么原因本人尚不得而知.解决方法是用把计算放入下面的 ...

  7. python 100day notes (1)

    x1 + x2 +x3 + x4 = 8 多少正整数解 上面的问题等同于将8个苹果分成四组每组至少一个苹果有多少种方案 即用三个隔板插7个空位. 答案C(7,3) =35 # __name__是Pyt ...

  8. Openstack组建部署 — Environment of Controller Node

    目录 目录 前文列表 Controller Node Install and configure components Setup DNS Server Setup NTP Server Instal ...

  9. Linux的文件访问权限及修改权限命令chmod

    http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...

  10. Linux下tomcat启动慢，阻塞

    声明:本文为转载,请尊重版权,原文地址: https://www.cnblogs.com/songjinju/p/7505564.html 这两天在linux部署完tomcat以后,发现每次启动都非常 ...