CSS3 图片裁剪居中 - object-fitt 属性

图片裁剪

CSS 是具备裁剪网页中图片的能力的，如果是 背景图片，那么使用的裁剪方法是 background-size 属性。而如果是普通图片，那么使用的裁剪方法则是 object-fit。他们两者的裁剪模式大致相同，都是fill、contain、cover、scale-down ... 这几种。

object-fit: cover

该模式是最常见的裁剪模式，作用是把图片等比例裁剪，并且居中，例如下面例子。

img {
  object-fit: cover;
  width: 440px; 
  height: 452px;
}

<img src="/public/home/img/fly.jpg">

<!-- 
  fly.jpg 的原图大小是 640 * 452，上面的样式把它的大小设置成 440 * 452，通过 object-fit: cover; 这个属性，图片就会自动的按照新设置的大小等比例的裁剪之后居中
-->

fly.jpg 原图显示如下。

object-fit: cover 裁剪后显示如下。

object-fit: fill

这个属性的作用是将图片拉伸填满整个新设置的大小里面，实际中用的不多的一个原因是它拉伸之后会使 图片扭曲变形。

object-fit: fill 裁剪后显示如下。

object-fit: contain

这个属性也是一种比较有意思的裁剪模式，它是按原图的比例把图片缩放在新设置的大小里面，但不作任何裁剪也没作填充。

object-fit: contain 裁剪后显示如下。