ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【CSS】可更换元素的控制属性：object-fit属性和object-position属性 [打印本页]

作者: 东湖之滨 时间: 2024-8-10 09:58
标题: 【CSS】可更换元素的控制属性：object-fit属性和object-position属性
一、可更换元素是什么？

可更换元素指的是其展现的结果和内容是不受到css控制的，而是由外部资源来决定的。
范例的可更换元素有<iframe>、<img>、<video>、<embed>，有些情况下canvas、audio、object、option、以及type="image"的input元素也会以可更换元素处理
具体来说有以下特点

元素内容在其框中的位置或者定位方式，仅有部分特定属性控制
- object-fit：控制内容对象的填充方式（功效类似于background-size，但前者不可设置内容宽高的具体数值，而background-size可以）
- object-position：内容对象在盒中的位置（功效类似于background-position）
平凡css属性修改可更换元素时，内部内容不继续父文档的样式

PS：background属性是利用css插入元素的背景图，在使用场景上还是有本质区别的

二、object-fit属性

1、寄义
object-fit属性指定可更换元素（比方<img>或者<video>）的内容应该以何种填充方式，适应到其元素现有高度和宽度的框内。
2、可选值

none：保持内容的原有尺寸，不做任何缩放操作。
fill：保证内容恰好填充满元素，非等比缩放，因此可能对原来的内容对象造成拉伸
contain：保证内容对象被完全展现，并适应元素宽高进行等比缩放，不愿定铺满元素
cover：使内容填满元素，并保证本来的宽高比，等比缩放
scale-down：等比呈现图像，取"none”和"contain"之中呈现结果最小的方式

三、object-position属性

object-position属性规定了可更换元素的内容在框中呈现的位置。
其取值可以是单个关键字，也可以是分别定义x轴、y轴上的位置，也可以是分别定义上、下、左、右的偏移量。

/* 关键字值 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* <percentage> 值 */
object-position: 25% 75%;
/* <length> 值 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* 边缘偏移值 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* 全局关键字 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

复制代码

对上、下、左、右的明白，可以明白为依次移动设置的偏移量，就是最后的位置了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)