关于CSS3 object-position/object-fit属性的使用
object-position/object-fit属性一般用在替换元素上。
什么叫替换元素?
不是所有元素都叫“替换元素”。在CSS中,“替换元素”指的是:
其内容不受CSS视觉格式化模型控制的元素,比如image
, 嵌入的文档(iframe
之类)或者applet
。
比如,img
元素的内容通常会被其src
属性指定的图像替换掉。
替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。
比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。
另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object
, video
, textarea
, input
也是替换元素,audio
和canvas
在某些特定情形下为替换元素。
使用CSS的content
属性插入的对象是匿名替换元素。
也就是说,本文的object-position
和object-fit
只针对替换元素有作用,也就是form
表单控件系列,img
图片,HTML5的video
视频等元素
一、object-fit的理解
它具体有五个值:
object-fit: fill;
- fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
- contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
- cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
- none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
注: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属性的使用的更多相关文章
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js如何判断Object是否为空?(属性是否为空)
js 判断一个 object 对象是否为空 转载原文 判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” fo ...
- es6之Object扩展及内部属性的总结
对象扩展: 1.Object.is(A,B) :比较两个值是否相等,取代===运算:只要值相等代表相等:其中NAN和NAN相等:+0和-0不相等: 2.Object.assign(target,sou ...
- javascript traverse object attributes 遍历对象属性
* for in for (var prop in o) { if (o.hasOwnProperty(prop)) { console.log(o[prop]); } } * Object keys ...
- 论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别
前不久,一朋友求助,让我给解释一波Object.keys(), Object.getOwnPropertyNames(), for in的区别,面试中好几次呗问了.所以,抽了点时间看了看,大概把我看的 ...
- js中[object Object]与object.prototype.toString.call()
最近在用node读取文件中的json数据后,用JSON.parse()转成了json,然后响应数据传给前端,发现输出值object对象时显示[object object],在这里我们来看一下他的具体意 ...
- js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class
https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...
- Object.keys(),Object.values(),Object.entries()
(1)Object.keys() // 返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名. eg:var obj = {a:1,b:'gy'} Ob ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CSS布局 ——从display,position, float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
随机推荐
- 嵌入系统squashfs挂载常见问题总结
由于squahsfs的一些优点,嵌入系统常常直接使用squashfs作为initrd挂载到/dev/ram,作为rootfs.这里对常见的一些问题进行一些分析. 1. kernel启动出现错误 RAM ...
- 翻译连载 | 第 9 章:递归(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- Java中的HTTP通信技术详解
1.使用HTTP的Get方式读取网络数据 class ReadByGet extends Thread{ @Override public void run(){ URL url = n ...
- css控制div强制换行
div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...
- 51nod 1451 合法三角形 判斜率去重,时间复杂度O(n^2)
题目: 这题我WA了3次,那3次是用向量求角度去重算的,不知道错在哪了,不得不换思路. 第4次用斜率去重一次就过了. 注意:n定义成long long,不然求C(3,n)时会溢出. 代码: #incl ...
- 小米2017秋招真题——电话号码分身问题(Java版)
原题描述如下: 通过对各个数字对应的英文单词的分析,可以发现一些规律: 字母Z为0独占,字母W为2独占,字母U为4独占,字母X为6独占,字母G为8独占: 在过滤一遍0.2.4.6.8后,字母O为1独占 ...
- HTTP库Axios
前面的话 本文将详细介绍HTTP库Axios 概述 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [安装] 在Vue中使用,最好安装两个模块axios ...
- bzoj1806 [Ioi2007]Miners矿工配餐
[bzoj1806][Ioi2007]Miners 矿工配餐 2014年7月10日1,7870 Description 现有两个煤矿,每个煤矿都雇用一组矿工.采煤工作很辛苦,所以矿工们需要良好饮食.每 ...
- php正则匹配utf-8编码的中文汉字
在javascript中,要判断字符串是中文是很简单的.比如: var str = "php编程"; if (/^[\u4e00-\u9fa5]+$/.test(str)) { a ...
- python之testcenter操作
一.设置python环境 1. 从以下路径中将StcPython.py文件拷贝出来 Linux: /Installdir/Spirent_TestCenter_4.xx/Spirent_TestCen ...