object-fit和object-position之间的关系有点类似于background-size和background-position

object-fit:

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

object-position:

object-position 属性规定了指定元素的替换内容在其盒子内的对齐方式。（参考示意）

img替换元素和src替换内容是两个独立体

详解地址：http://www.zhangxinxu.com/wordpress/?p=4676

object-fit、object-position 属性的更多相关文章

  1. Delphi控件之---UpDown以及其与TEdit的配合使用（比如限制TEdit只能输入数字，还有Object Inspector之组件属性的介绍）

    最近在开发中使用到了UpDown这个控件,但是因为之前没有使用过,所以很不熟悉,于是就编写了一个简单的demo来学习UpDown以及其结合TEdit的用法. 初步的常用功能的简介 目前(2015.08 ...

  2. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  3. How can I get an object's absolute position on the page in Javascript?

    How can I get an object's absolute position on the page in Javascript? How can I get an object's abs ...

  4. js如何判断Object是否为空?(属性是否为空)

    js 判断一个 object 对象是否为空 转载原文 判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” fo ...

  5. es6之Object扩展及内部属性的总结

    对象扩展: 1.Object.is(A,B) :比较两个值是否相等,取代===运算:只要值相等代表相等:其中NAN和NAN相等:+0和-0不相等: 2.Object.assign(target,sou ...

  6. javascript traverse object attributes 遍历对象属性

    * for in for (var prop in o) { if (o.hasOwnProperty(prop)) { console.log(o[prop]); } } * Object keys ...

  7. WPF MediaElement.Position属性

    Position 属性定义:获取或设置媒体播放时间的当前进度位置. // // 摘要: // 通过媒体播放时获取或设置进度的当前位置. // // 返回结果: // 媒体时自以来的.默认值为 00:0 ...

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

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

  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. Jenkins 使用Tfs 插件出现 MappingConflictException 错误问题解决

    FATAL: com.microsoft.tfs.core.clients.versioncontrol.exceptions.MappingConflictException: The path C ...

  2. Arch LInux安装dde（Deepin Desktop Environment 深度桌面环境）

    我一直比较推荐一些Linux新手使用Deepin Linux,因为我认为这种尽量的follow Windows的系统至少对于新手来说是比较的友好的,而且预装了QQ 火狐浏览器中文版,甚至还移植了像36 ...

  3. 既然CPU一次只能执行一个线程，那多线程存在的意义是什么？

    今天看到了一篇文章,终于解除了一直的疑惑.         原文链接:https://www.cnblogs.com/qingbafengliuxia/p/10171638.html CPU的时间是按 ...

  4. Spring boot读取application.properties中文乱码

    解决方案 在IDEA环境下: File -> Settings -> Editor -> File Encodings 将Properties Files (*.properties ...

  5. Nonlinear Component Analysis as a Kernel Eigenvalue Problem

    目录 引 kernel PCA kernel 的选择 性质 一些问题 代码 Scholkopf B, Smola A J, Muller K, et al. Nonlinear component a ...

  6. Redis的常见用法

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  7. mysql union 与 union all 语法及用法

    1.mysql   union  语法 mysql   union 用于把来自多个select  语句的结果组合到一个结果集合中.语法为: select  column,......from tabl ...

  8. web开发中各种宽高

    Gosper 曲线:https://www.cnblogs.com/tgzhu/p/8286616.html

  9. Add AI feature to Xamarin.Forms app

    Now, AI is one of important technologies.Almost all platforms have API sets of AI. Following list is ...

  10. Java定义三个点Object...

    从Java 5开始,Java语言对方法参数支持一种新写法,叫 可变长度参数列表,其语法就是类型后跟...,表示此处接受的参数为0到多个Object类型的对象,或者是一个Object[]. public ...