我的簡歷這個模塊宿稀，涉及到了生活照的圖片的展示趁舀，圖片的寬高是固定死的:寬度是父控件的33%，高度是105px,在這種情況下祝沸，要保證圖片不變形矮烹，就要借助image標(biāo)簽中的mode屬性了巡蘸，其中有個屬性值是aspectFill,意思就是說，在保證原圖的不變形(縮放比例不變)的情況下擂送，圖片的哪個短邊先縮放到白色的寬或高悦荒，就停止縮放， 開始截取多余部分
image.png
<view class="hadImg" style="display:block" wx:for="{{lifeImgData}}" wx:key="index">
<view class="widthBox">
<image class="imgBox" mode="aspectFill" src="{{item.url}}">
<view class="deleteDiv" id="deleteDiv1" data-id="{{item.id}}" bindtap="delSelect">
<text class="iconfont icon-guanbi rotateDiv"></text>
</view>
</image>
</view>
</view>
微信的aspectFill屬性裁剪且不變形的原理(想理解這個屬性的同學(xué)請往下看)
-
用AE做了一個動畫效果嘹吨，你應(yīng)該會更好的理解
101.1755230.gif
白色為固定的寬高搬味，圖片要顯示到白色區(qū)域中
image.png
使用aspectFill屬性值，圖片的哪個邊先縮放到白色的寬或高蟀拷，就停止縮放碰纬。(其實就是圖片的哪個邊距離白色近，等比例縮放的時候就會 被先縮放到问芬。這里紅色的高距離白色近悦析，所以當(dāng)縮放到白色的高高的時候此衅，圖片就會停止縮放)
image.png
停止縮放之后，就會開始截取骑歹，將圖片和白色重合的區(qū)域顯示到界面上
image.png
