其實(shí)這篇文章的標(biāo)題也可以叫做《如何用css3實(shí)現(xiàn)微信小程序image的mode屬性》，因?yàn)槲覀兘裉煊懻摰捻憫?yīng)式裁剪縮放圖片栋艳，主要是實(shí)現(xiàn)了微信小程序image標(biāo)簽的mode屬性吸占。
微信小程序image組件的mode屬性
開(kāi)發(fā)過(guò)微信小程序的同學(xué)都知道兼蕊，當(dāng)后臺(tái)返回來(lái)的圖片大小不一樣孙技，或者用戶(hù)上傳的圖片大小不一樣牵啦，而我們需要統(tǒng)一進(jìn)行展示的時(shí)候哈雏，可以利用image標(biāo)簽的mode屬性對(duì)圖片進(jìn)行縮放裁剪裳瘪。mode屬性的具體屬性及表現(xiàn)形式如圖:
如何使用css實(shí)現(xiàn)mode效果
在移動(dòng)端和PC端開(kāi)發(fā)中，我們可以采用兩種方案去實(shí)現(xiàn)mode的各種效果，由于使用了css3的一些屬性愈腾，移動(dòng)端瀏覽器適配性比較好，不需要額外做適配橱乱，PC端可以根據(jù)具體情況做一些兼容處理泳叠。
- 使用背景圖片的
background-position屬性和background-size屬性 - 使用css3的
object-fit屬性和object-position屬性
object-fit屬性
這個(gè)屬性決定了像[img]和[videos]這樣的替換元素的內(nèi)容應(yīng)該如何使用他的寬度和高度來(lái)填充其容器。
可以通過(guò)使用 [object-position] 屬性來(lái)切換被替換元素的內(nèi)容對(duì)象在元素框內(nèi)的對(duì)齊方式种蝶。
取值：
contain
被替換的內(nèi)容將被縮放螃征，以在填充元素的內(nèi)容框時(shí)保持其寬高比锅棕。 整個(gè)對(duì)象在填充盒子的同時(shí)保留其長(zhǎng)寬比裸燎，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“[黑邊]
cover
被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框移稳。如果對(duì)象的寬高比與內(nèi)容框不相匹配个粱，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框。
fill
被替換的內(nèi)容正好填充元素的內(nèi)容框。整個(gè)對(duì)象將完全填充此框睛低。如果對(duì)象的寬高比與內(nèi)容框不相匹配，那么該對(duì)象將被拉伸以適應(yīng)內(nèi)容框。
none
被替換的內(nèi)容將保持其原有的尺寸澄暮。
scale-down
內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同麻惶，取決于它們兩個(gè)之間誰(shuí)得到的對(duì)象尺寸會(huì)更小一些窃蹋。
object-position屬性
[CSS]屬性 object-position 規(guī)定了[可替換元素]的內(nèi)容匈辱，在這里我們稱(chēng)其為對(duì)象（即 object-position 中的 object），在其內(nèi)容框中的位置〈剐唬可替換元素的內(nèi)容框中未被對(duì)象所覆蓋的部分，則會(huì)顯示該元素的背景。
在接下來(lái)的方案中鹃栽，有些方案可以使用兩種方式實(shí)現(xiàn)蓬抄，有的我暫時(shí)只用了一種方案耍贾，大家可以自取所需简肴。兩種方案html代碼如下：
<!-- 背景圖片 -->
<div class="wrapper">
<div class="inner"></div>
</div>
<!-- object-fit -->
<img src="2.jpg" class="objectImg">
.wrapper{
width: 200px;
height: 200px;
border: solid 2px red;
overflow: hidden;
}
我們展示的原圖如下：
實(shí)現(xiàn)在固定區(qū)域內(nèi)砰识，圖片保持其寬高比能扒，使圖片短邊能完全顯示出來(lái)
.inner{
width: 100%;
height: 0;
padding-bottom: 100%;
background: green;
background-size: cover;
background-image: url('4.jpg');
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
.objectImg{
width: 200px;
height: 200px;
object-fit: cover;
}
實(shí)現(xiàn)在固定區(qū)域內(nèi)辫狼，圖片保持其寬高比初斑，使圖片長(zhǎng)邊能完全顯示出來(lái)
.inner{
width: 100%;
height: 0;
padding-bottom: 100%;
background: green;
background-size: contain;
background-image: url('4.jpg');
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
}
.objectImg{
width: 200px;
height: 200px;
object-fit: contain;
}
這種方案膨处，圖片兩側(cè)可能會(huì)出現(xiàn)背景色
不保持縱橫比縮放圖片见秤，使圖片完全適應(yīng)
.objectImg{
width: 200px;
height: 200px;
object-fit: fill;
}
別的方式直接用圖片寬高100%就可以灵迫，這種會(huì)使圖片變形
不縮放圖片秦叛，只顯示圖片的頂部、底部瀑粥、左側(cè)挣跋、右側(cè)、左上狞换、右上避咆、左下、右下區(qū)域
.objectImg{
width: 200px;
height: 200px;
object-fit: none;
}
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 50% 0;">
<div class="text">object-fit 頂部</div>
</div>
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 50% 100%;">
<div class="text">object-fit 底部</div>
</div>
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 0% 50%;">
<div class="text">object-fit 左側(cè)</div>
</div>
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 100% 50%;">
<div class="text">object-fit 右側(cè)</div>
</div>
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 0 0;">
<div class="text">object-fit 左上</div>
</div>
<div class="wrapper">
<img src="4.jpg" class="objectImg" style="object-position: 0 100%;">
<div class="text">object-fit 左下</div>
</div>
原理上就是我們?cè)O(shè)置object-fit: none屬性后，圖片將不會(huì)進(jìn)行縮放撤师，我們可以通過(guò)object-position屬性自由調(diào)整圖片的位置剂府。object-position屬性的用法和background-position屬性簡(jiǎn)直一模一樣。
