其實這篇文章的標題也可以叫做《如何用css3實現(xiàn)微信小程序image的mode屬性》，因為我們今天討論的響應式裁剪縮放圖片，主要是實現(xiàn)了微信小程序image標簽的mode屬性。
微信小程序image組件的mode屬性
開發(fā)過微信小程序的同學都知道，當后臺返回來的圖片大小不一樣，或者用戶上傳的圖片大小不一樣，而我們需要統(tǒng)一進行展示的時候，可以利用image標簽的mode屬性對圖片進行縮放裁剪。mode屬性的具體屬性及表現(xiàn)形式如圖:
如何使用css實現(xiàn)mode效果
在移動端和PC端開發(fā)中，我們可以采用兩種方案去實現(xiàn)mode的各種效果，由于使用了css3的一些屬性，移動端瀏覽器適配性比較好，不需要額外做適配，PC端可以根據(jù)具體情況做一些兼容處理。
- 使用背景圖片的
background-position屬性和background-size屬性 - 使用css3的
object-fit屬性和object-position屬性
object-fit屬性
這個屬性決定了像[img]和[videos]這樣的替換元素的內(nèi)容應該如何使用他的寬度和高度來填充其容器。
可以通過使用 [object-position] 屬性來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。
取值：
contain
被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“[黑邊]
cover
被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應內(nèi)容框。
fill
被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應內(nèi)容框。
none
被替換的內(nèi)容將保持其原有的尺寸。
scale-down
內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。
object-position屬性
[CSS]屬性 object-position 規(guī)定了[可替換元素]的內(nèi)容，在這里我們稱其為對象（即 object-position 中的 object），在其內(nèi)容框中的位置。可替換元素的內(nèi)容框中未被對象所覆蓋的部分，則會顯示該元素的背景。
在接下來的方案中，有些方案可以使用兩種方式實現(xiàn)，有的我暫時只用了一種方案，大家可以自取所需。兩種方案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;
}
我們展示的原圖如下：
實現(xiàn)在固定區(qū)域內(nè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;
}
實現(xiàn)在固定區(qū)域內(nè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è)可能會出現(xiàn)背景色
不保持縱橫比縮放圖片，使圖片完全適應
.objectImg{
width: 200px;
height: 200px;
object-fit: fill;
}
別的方式直接用圖片寬高100%就可以，這種會使圖片變形
不縮放圖片，只顯示圖片的頂部、底部、左側(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>
原理上就是我們設(shè)置object-fit: none屬性后，圖片將不會進行縮放，我們可以通過object-position屬性自由調(diào)整圖片的位置。object-position屬性的用法和background-position屬性簡直一模一樣。
