【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轴上的位置，也可以是分别定义上、下、左、右的偏移量。

1. /* 关键字值 */
2. object-position: top;
3. object-position: bottom;
4. object-position: left;
5. object-position: right;
6. object-position: center;
8. /* <percentage> 值 */
9. object-position: 25% 75%;
11. /* <length> 值 */
12. object-position: 0 0;
13. object-position: 1cm 2cm;
14. object-position: 10ch 8em;
16. /* 边缘偏移值 */
17. object-position: bottom 10px right 20px;
18. object-position: right 3em bottom 10px;
19. object-position: top 0 right 10px;
21. /* 全局关键字 */
22. object-position: inherit;
23. object-position: initial;
24. object-position: revert;
25. object-position: revert-layer;
26. object-position: unset;

复制代码

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

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