object-position/object-fit属性一般用在替换元素上。

什么叫替换元素?

不是所有元素都叫“替换元素”。在CSS中,“替换元素”指的是:

其内容不受CSS视觉格式化模型控制的元素,比如image, 嵌入的文档(iframe之类)或者applet

比如,img元素的内容通常会被其src属性指定的图像替换掉。

替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。

比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。

另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。objectvideotextareainput也是替换元素,audiocanvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

也就是说,本文的object-positionobject-fit只针对替换元素有作用,也就是form表单控件系列,img图片,HTML5的video视频等元素

一、object-fit的理解

它具体有五个值:

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

注:object-fit功能类似于background-size

当我们想用视频作为网站的背景时,你肯定会想到用html5的video这个标签,但你会发现,给它设置宽度和高度为100%时,不会占满全屏,会有一块空隙,

这时你就可以使用object-fit这个属性了。

二、object-position的理解

object-position: 100% 100%;

object-position就是控制替换内容位置的。功能类似于background-position

原教程地址:http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

关于CSS3 object-position/object-fit属性的使用的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. js中[object Object]与object.prototype.toString.call()

    最近在用node读取文件中的json数据后,用JSON.parse()转成了json,然后响应数据传给前端,发现输出值object对象时显示[object object],在这里我们来看一下他的具体意 ...

  7. js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class

    https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...

  8. Object.keys(),Object.values(),Object.entries()

    (1)Object.keys() //       返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名. eg:var obj = {a:1,b:'gy'} Ob ...

  9. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  10. CSS布局 ——从display,position, float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

随机推荐

  1. mybatis-java-依赖注入

    第一种 setXXX形式的注入 我们的所有dao都会继承自定义的BaseDao,因此在BaseDao中完成对所有dao的注入 在DaoUtil中增加方法injectDao()来注入具体的dao pac ...

  2. python3中的编码与解码用法

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' #python3在编码时会把str编码成utf-8的bytes类型 ...

  3. PYTHON 函数局部变量和全局变量

    有这样一段PYTHON代码,从事C语言开发的人都知道,如果定义了全局变量,而函数内没有定义同名的函数变量的话,那么在函数内对该变量的赋值就是对全局变量空间数值的修改, 然后在PYTHON中却不尽相同, ...

  4. Delphi中 StrToIntDef函数的用法

    Delphi中 StrToIntDef函数的用法:比如我要判断一个文本框里输入的字符串能不能转换为integer类型,如果能,则返回转换后的整型数据,如果不能,则返回整数0,那么我就可以用strtoi ...

  5. 51nod 1118 机器人走方格 解题思路:动态规划 & 1119 机器人走方格 V2 解题思路:根据杨辉三角转化问题为组合数和求逆元问题

    51nod 1118 机器人走方格: 思路:这是一道简单题,很容易就看出用动态规划扫一遍就可以得到结果, 时间复杂度O(m*n).运算量1000*1000 = 1000000,很明显不会超时. 递推式 ...

  6. vue-resource传参数到后端,后端取不到数据的问题

    先上一段代码: this.$http.post('xxx',{Search_Text:this.search_text}).then(function(response){ // 响应成功回调 thi ...

  7. Ansible(一) - 入门及安装

    Ⅰ. Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置 ...

  8. java基础(Fundamental)

    第一节 java开发环境 1.Linux操作系统 1)开源的操作系统.免费,主要作为服务器操作系统, 而Java主要是服务器端开发,所以部署环境都是Linux 2)Linux与Windows目录结构的 ...

  9. docker镜像文件导入与导出

    工作中经常需要拉取一些国外的镜像,但是网络限制等原因在公司拉取很慢,所以我习惯用亚马逊服务器拉取镜像,导出后下载到本地再导入开发环境 1. 查看镜像id sudo docker images REPO ...

  10. windows下PHP中Fatal error Call to undefined function curl_init()的解决方法

    参考官方解决方法:http://nz.php.net/manual/en/curl.installation.php 1.php安装目录下的ext文件夹下面是否有php_curl.dll文件,然后右键 ...