object-position和object-fit
今天在用video标签时发现改变video的宽和高,它里面播放内容由于比例的限制无法充满我设置的宽高,这时要是有类似background-size属性该是多好。网上一查果然找到了css3中的object-fit。
1、object-fit:The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. —MDN
翻译一下就是object-fit这个属性指定 可替换元素 在已被设定好的宽高中展示的方式,那么问题来了什么是可替换元素,
替换元素:
其内容不受CSS视觉格式化模型(中文释义参见这里)控制的元素,比如image
, 嵌入的文档(iframe
之类)或者applet
。比如,img
元素的内容通常会被其src
属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object
, video
, textarea
, input
也是替换元素,audio
和canvas
在某些特定情形下为替换元素。
使用CSS的content
属性插入的对象是匿名替换元素。
下面是object-fit每个属性的具体含义(引用自张鑫旭大神博客)
- fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
- contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
- cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
- none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
下图依次是contain、cover、scale-down(所有其他元素一样。video设置为500*500)
很多人可能会想为什么我设置了video的高度和宽度都是500,为什么没有充满,其实这就是替换元素,我们设置的高、宽都是它的框的大小,里面可替换的内容并没设置,当我们把video的背景设为红色来看一下
src
指向的视频属于替换内容,注意,这个替换内容和这个video替换元素是壳子与内容的关系,两者是独立的,object-fit
控制的永远是替换内容的尺寸表现,注意,是替换内容的尺寸表现,不是video替换元素
2、object-position
要比object-fit
单纯的多,就是控制替换内容位置的。默认值是50% 50%
,也就是居中效果,与background-position
类似,object-position
的值类型为<position>
类型值。也就是说,CSS3的相对坐标设定样式支持的。
举个简单的例子object-position: 100% 100%;
图片中视频明显的跑到最下边了
以上就是简单的介绍,需要注意的是这两个都在IE上不兼容,这要格外注意。
object-position和object-fit的更多相关文章
- Object obj=new Object()的内存引用
Object obj=new Object(); 一句很简单的代码,但是这里却设计Java栈,Java堆,java方法去三个最重要的内存区域之间的关联. 假设这句代码出现在方法体中. 1.Object ...
- host Object和native Object的区别
Native Object: JavaScript语言提供的不依赖于执行宿主的对象,其中一些是内建对象,如:Global.Math:一些是在脚本运行环境中创建来使用的,如:Array.Boolean. ...
- Intent传递List和Object和List<Object>
一.传递List 传递List<String>的方法 小技巧,List<object> 可以使用json 转为 List<string>,就可以使用 List< ...
- JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...
- iOS 杂笔-21(self.name = “object” 和 _name =”object” 有什么不同?)
iOS 杂笔-21(self.name = "object" 和 _name ="object" 有什么不同?) 问题如题,这是考察对属性与变量的了解而已. s ...
- [Javascript] Object.freeze() vs Object.seal()
let person = { firstName: "Zhentian", lastName: "Wan" }; /*Object.freeze() makes ...
- Java基础知识强化26(1):Object类之Object类的概述
1.Object类 类Object是类层次结构的根类,每个类都使用 Object作为超类.所有对象(包括数组)都实现这个类的方法 每个类直接或者间接继承自Object类 2.Object类无参构造 ...
- Object.wait()与Object.notify()的用法
http://www.cnblogs.com/xwdreamer/archive/2012/05/12/2496843.html 参考文献: object.wait()和object.notify() ...
- 遍历对象属性(for in、Object.keys、Object.getOwnProperty)
js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...
- [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...
随机推荐
- codeforces 466C. Number of Ways 解题报告
题目链接:http://codeforces.com/problemset/problem/466/C 题目意思:给出一个 n 个数的序列你,问通过将序列分成三段,使得每段的和都相等的分法有多少种. ...
- WPF-悬浮在底部的导航
先用Rectangle代替导航按钮,这个导航会悬浮在界面的底部,当鼠标移进导航按钮上的时候,按钮会放大,移出后恢复正常. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...
- Java网络编程Socket通信
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议 UDP (User Datagram Proto ...
- codeforces 664B B. Rebus(乱搞题)
题目链接: B. Rebus time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- mysql 数据库修改用户名和密码
因为经常修改数据库密码,也找到了几种修改数据库密码的方式,在这里给大家介绍下供大家参考通过navicat 管理数据库客户端来修改数据库密码: 选择数据库 --- 点击导航条的用户 --- 编辑用户 ...
- Linux下启动mongodb
完成安装mongodb(略) 创建数据目录: # mkdir /data/mongo 创建配置文件 # vi /data/mongo/mongodb.cnf dbpath=/data/mongo/ l ...
- poj 2069 Super Star —— 模拟退火
题目:http://poj.org/problem?id=2069 仍是随机地模拟退火,然而却WA了: 看看网上的题解,都是另一种做法——向距离最远的点靠近: 于是也改成那样,竟然真的A了...感觉这 ...
- Storm 01之 Storm基本概念及第一个demo
2.1 Storm基本概念 在运行一个Storm任务之前,需要了解一些概念: Topologies :[tə'pɑ:lədʒɪ]拓扑结构 Streams Spouts:[spaʊt]喷出; 喷射; 滔 ...
- 【220】◀▶ IDL 数组操作函数说明
参考:Array Creation Routines —— 创建数组函数参考:Array Manipulation Routines —— 操作数组函数 01 MAX 最大值. 02 MIN ...
- (3)ASP.NET Core 服务生命周期
1.前言 在ConfigureServices方法中的容器注册每个应用程序的服务,Asp.Core都可以为每个应用程序提供三种服务生命周期:●Transient(暂时):每次请求都会创建一个新的实例. ...