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. C++11之列表初始化

    1. 在C++98中,标准允许使用花括号{}来对数组元素进行统一的集合(列表)初始化操作,如:int buf[] = {0};int arr[] = {1,2,3,4,5,6,7,8}; 可是对于自定 ...

  2. Django--分页器（paginator）、Django的用户认证、Django的FORM表单

    分页器(paginator) >>> from django.core.paginator import Paginator >>> objects = ['joh ...

  3. apue 第4章 文件和目录

    获取文件属性 #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> int stat(c ...

  4. 在ios微信中提交form，php端收不到参数的问题

    今天做h5页面时,微信浏览器中提交form表单,发现php端收不到post过来的参数,在普通浏览器中可以,安卓微信也可以,$_POST,$_GET,$_REQUEST等方式都不行. 后来,把form表 ...

  5. [bzoj3733]Iloczyn 题解(搜索剪枝)

    3733: [Pa2013]Iloczyn Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 741  Solved: 217[Submit][Statu ...

  6. jquery实现的ajax

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEnco ...

  7. 5. 使用grafana模板

    我们刚刚配置的Dashboard还是有点简陋,为了界面美观,这里我们这里使用一些模板 1.使用node_exporter模板 去grafana官网下载模板,点击Download,如下所示 2.导入模板 ...

  8. sql server 与 oracle的区别（转）

    --1.数据类型不同.      --sql server 的数据类型:int ,smallint ,char,varchar,nchar,nvarchar,ntext,datetime,smalld ...

  9. Java数据类型简介

    Java数据类型 以下两行Java代码定义了两个整数:num1和num2: num1和num2是两个int类型的变量. int关键字指定它的后面是变量的名称,并表示数据类型整数,例如:10,15,70 ...

  10. C# winform 动态操作webService

    1.动态操作webService类 public static class WebServiceHelper { #region InvokeWebService //动态调用web服务 public ...