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. parse_str()函数怎么用？

    php parse_str()函数 语法 parse_str()函数怎么用? php parse_str()函数表示将字符串解析成多个变量,语法是parse_str(string,array),如果未 ...

  2. C#将数据导入到Excel表格中

    public static DataTable GetExcelToDataTableBySheet(string FileFullPath, string SheetName){           ...

  3. react — script引入 和 脚手架使用的区别

    1.React 入门实例教程 :http://www.ruanyifeng.com/blog/2015/03/react.html ( 阮一峰的博客)  或   https://segmentfaul ...

  4. [CSP-S模拟测试]:玄学题/c（数学）

    题目传送门(内部题40) 输入格式 第一行:两个正整数$n$.$m$. 输出格式 第一行:一个整数,代表式子的值. 样例 样例输入1: 4 5 样例输出1: 0样例输入2: 799 8278 样例输出 ...

  5. windows环境下如何安装memcached教程

    Memcached 是一个开源免费高性能的分布式内存对象缓存系统,能够加快网站访问速度和减轻数据库压力,本文向大家介绍下windows环境下如何安装memcached. 工具/原料   memcach ...

  6. linux日常---1、linux下安装、查看、卸载包常用命令

    linux日常---1.linux下安装.查看.卸载包常用命令 一.总结 一句话总结: 对比学习 1.linux如何查看系统中安装的程序? rpm -qa   # 查看所有安装的软件包 2.linux ...

  7. ()C#打印机

    System.Drawing.Printing下得用来完成打印功能 1.打印设置 2.页面设置 3.打印预览 4.打印

  8. java %d %n \n

    Java中,%d和%f分别用来表示输出时,替换整型输出和浮点型输出的占位符. 如: int a=28; float b = 13.0f; System.out.printf("整数是:%d% ...

  9. spring data jpa 使用JPQL的方式查询

    用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于某些业务来说,我们还需要灵活的构造查询条件,这时就可以使用@Query注解,结合JPQL的语句方式完成查询 @Que ...

  10. Apache的虚拟主机功能（基于IP、域名、端口号）

    Apache虚拟主机就是在一个Apache服务器上配置多个虚拟主机,实现一个服务器提供多站点服务,其实就是访问同一个服务器上的不同目录. 主要有三种方法: 1.通过不同的IP地址 2.通过不同的域名 ...