CSS3 object-fit 和 object-position

最近一直忙于将JavaScript学习的笔记整理成电子书，也没什么空闲时间写新的文章。趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。

这两个奇葩的属性是搞毛的呢？其实它们是为了处理替换元素（replaced elements）的自适应问题，简单的说，就是处理替换元素的变形（这里指长宽比例变形）问题。

等等，好像多了一个名词，啥叫替换元素？替换元素实际上是：

其内容不受CSS视觉格式化模型控制的元素,好比image,嵌入的文档(iframe之类)或者applet,叫作替换元素。比：img元素的内容一般会被其src属性指定的图像替换掉。替换元素一般有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。好比一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另外一方面,其余文档也可能没有固有的尺寸,好比一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展示独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个固然不是我头脑风暴来的，而是引用别人的解释：引用

常见的替换元素有<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。

要是看的稀里糊涂的也不要紧，接着往下看，我相信你会懂得！

一、object-fit

语法：

object-fit: fill | contian | cover | none | scale-down;复制代码

• fill ： 默认值。填充，可替换元素填满整个内容区域，可能会改变长宽比，致使拉伸。
• contain ： 包含，保持原始的尺寸比例，保证可替换元素完整显示，宽度或高度至少有一个和内容区域的宽度或高度一致，部份内容会空白。
• cover ： 覆盖，保持原始的尺寸比例，保证内容区域被填满。所以，可替换元素可能会被切掉一部分，从而不能完整展现。
• none ： 保持可替换元素原尺寸和比例。
• scale-down ： 等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

很差意思，我又要摆妹子来诱惑大家了，看效果图：

上面的五个例子的代码：

<style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style>

<div class="box">   
  <img src="example-girl.jpg" class="fill" alt="">  
</div>   
<div class="box">   
  <img src="example-girl.jpg" class="contain" alt=""> 
</div>   
<div class="box">   
  <img src="example-girl.jpg" class="cover" alt=""> 
</div>   
<div class="box">   
  <img src="example-girl.jpg" class="none" alt=""> 
</div>   
<div class="box">   
  <img src="example-girl.jpg" class="scale" alt=""> 
</div>复制代码

看到这些效果，我想同志们最关心的的应该是兼容性，点这里点这里

二、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法：

object-position: <position>复制代码

默认值是50% 50%，也就是居中效果，其取值和CSS中background-position属性取值同样。（若是不熟悉background-position，能够瞄瞄这里《CSS3 Background》）

例如：替换元素位于内容区域的左上角

img{
  object-fit: contain;
  object-position: 0 0;
}复制代码

效果图：

例如：替换元素相对于左下角10px 10px地方定位

img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}复制代码

效果图：

固然，你也可使用calc()来定位：

img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}复制代码

效果图：

它还支持负数：

img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}复制代码

效果图：

总之，object-position的特性表现与backgound-position同样同样的。

兼容性：点这里

到这里，这两个属性算是讲完了，就是这么简单。