因?yàn)橛辛薈SS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態(tài)效果
在有CSS3之前裁剪圖片實(shí)現(xiàn)也是頗有難度的。現(xiàn)在我們有了兩個(gè)非常方便簡單的CSS3屬性可以實(shí)現(xiàn)裁剪，那就是object-fit和object-position, 這兩個(gè)屬性可以讓我們改變圖片的大小，但是不影響圖片的長寬比。
當(dāng)然我們可以使用圖片處理工具或者使用JavaScript等插件來實(shí)現(xiàn)圖片裁剪功能。但是因?yàn)橛辛薈SS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態(tài)效果。
為了讓我們的例子更加簡單，我們這里使用了<input type="checkbox">復(fù)選框元素，這樣我們就可以使用:checked的偽類來觸發(fā)啟動效果。所以在例子里面我們完全不需要JavaScript的協(xié)助。
- 代碼來源：詳情
實(shí)現(xiàn)原理：
一、首先給予圖片一個(gè)寬高height: 1080px，width: 1920px。
二、然后用CSS選擇器，鎖定當(dāng)input被選中后img標(biāo)簽的樣式變化。當(dāng)被選中時(shí)，給圖片設(shè)定一個(gè)新的寬高，這里我們給寬高各自500像素：width: 500px，height: 500px。
三、然后我們加上了過渡效果和時(shí)間讓圖片改變寬高時(shí)有動畫過渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top這兩個(gè)屬性來保持圖片的寬高比例，這樣就大功告成了！
我們來看看完成的代碼：
勾選裁剪圖片 <input type="checkbox" />
<br />
<img
src="https://img-blog.csdnimg.cn/2020032122230564.png!npcink.webp"
alt="Random"
/>
input {
transform: scale(1.5); /* 只是用來放大復(fù)選框大小 */
margin: 10px 5px;
color: #fff;
}
img {
width: 1920px;
height: 1080px;
transition: 0s;
}
/* css選擇器鎖定復(fù)選框被選中時(shí)的狀態(tài) */
input:checked + br + img {
width: 500px;
height: 500px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 4s;
} 知識總結(jié)
- object-fit?— CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。
- object-position?— 用來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。
- transition?— 過渡可以為一個(gè)元素在不同狀態(tài)之間切換的時(shí)候定義不同的過渡效果。