在有CSS3之前裁剪圖片實現也是頗有難度的。現在我們有了兩個非常方便簡單的CSS3屬性可以實現裁剪，那就是object-fit和object-position, 這兩個屬性可以讓我們改變圖片的大小，但是不影響圖片的長寬比。

當然我們可以使用圖片處理工具或者使用JavaScript等插件來實現圖片裁剪功能。但是因為有了CSS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態效果。

為了讓我們的例子更加簡單，我們這里使用了<input type="checkbox">復選框元素，這樣我們就可以使用:checked的偽類來觸發啟動效果。所以在例子里面我們完全不需要JavaScript的協助。

• 代碼來源：詳情

實現原理：

一、首先給予圖片一個寬高height: 1080px，width: 1920px。

二、然后用CSS選擇器，鎖定當input被選中后img標簽的樣式變化。當被選中時，給圖片設定一個新的寬高，這里我們給寬高各自500像素：width: 500px，height: 500px。

三、然后我們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果：transition: width 2s, height 4s;。

四、最后加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例，這樣就大功告成了！

我們來看看完成的代碼：

勾選裁剪圖片 <input type="checkbox" />
<br />
<img
  src="https://img-blog.csdnimg.cn/2020032122230564.png"
  alt="Random"
/>

input {
  transform: scale(1.5); /* 只是用來放大復選框大小 */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* css選擇器鎖定復選框被選中時的狀態 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
} 

知識總結

• object-fit?— CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。
• object-position?— 用來切換被替換元素的內容對象在元素框內的對齊方式。
• transition?— 過渡可以為一個元素在不同狀態之間切換的時候定義不同的過渡效果。