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. org.apache.http.client.HttpClient使用方法

    一.org.apache.commons.httpclient和org.apache.http.client区别(转)   官网说明: http://hc.apache.org/httpclient- ...

  2. 简易的Master-Worker框架

    Master-Worker模式是一种使用多线程进行数据处理的结构,多个worker进程协作处理用户请求,master进程负责维护worker进程,并整合最终处理结果 主要参与者 Worker:用于实际 ...

  3. python print 连续输出变量加字符串

    a=1 b=2 print(a,'+',b,'=',a+b) 输出:1+2=3

  4. kvm搭建

    今日做公司项目时恰好是这个,然后就做一个博客,希望可以帮助到你们 1.把虚拟机zmedu63内存调成6G以上,因为我们要在VMware虚拟中安装KVM,然后在KVM中再安装虚拟机,需要内存大一些.zm ...

  5. vs code常用插件(python)

    1.chinese 作用:vscode设置为中文. 使用方法:Ctrl+Shift+P:输入 "config":选择zh 2.python 作用:调试 3.autoDocstrin ...

  6. Comet OJ 茶颜悦色 线段树+扫描线（矩形覆盖最多点+优化）

    题目:https://www.cometoj.com/contest/59/problem/D?problem_id=2713 题意:给你一个正方形,然后给你n个点,这个正方形能随意放哪,要求那个正方 ...

  7. HTTP协议-Headers

    Request headers 1 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 ...

  8. 【已转移】【Java架构：基础技术】一篇文章搞掂：Java 8

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 一.Java的历史与演变 目的:为完全了解Java,需要理解Java的诞生原因.成型动力以及他继承的思想. 计算机语言的创新与发展 ...

  9. java集合框架面试要点整理

  10. Data URL scheme 笔记

    0x01起因 今天做CTF的时候,发现一堆数据,大概是这样的 data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAIUAAACFCAYAAAB12js8AAA ...