aspectFill 與 widthfix 都是保持寬高比不變

aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。

aspectFill同樣保持圖片的寬高比不會變形。但它讓圖片完全填滿整個容器，類似于scaleToFill這種模式。不同的是，scaleToFill會改變圖片的寬高比，而aspectFill不會。

用我們提到的“容器”的觀點來理解aspectFill。既然aspectFill一定要填滿整個容器，那么首先要讓這張圖片的整體尺寸是大于這個容器的，就等比例放大圖片（任意一邊小于容器都需要放大，否則就會留下空白），讓圖片的某一邊剛好接觸容器的一邊，同時另外一邊又不會小于容器（可以超出，因為這一邊會被截取）。

如果原始尺寸大于容器，則需要等比例縮小，縮小的要求同樣是一邊剛好接觸容器，另外一邊要等于或者超出容器。。這樣就保證了圖片可以完全填滿整個容器，但某一邊要發生截取。那么問題來了，如何截取？在超出容器的這一邊上，是保留圖片的上部、中部還是下部？答案是：中部。

那么把代碼設置為mode=aspectFill的效果，把原始圖片的中間部分保留下來。

Widthfix 寬度不變，高度自動變化，保持原圖寬高比不變。

Widthfix屬性的最大特點是，圖片將不會按照設定的尺寸呈現，比如設置image寬度為750px，高度為340px，如果設置mode=widthfix，則圖片最終不會按照750px和340px呈現，除非原始圖片切好是這個尺寸。這個屬性讓寬縮放至指定尺寸，再動態計算高度，如圖所示。

別的例子之前代碼如下：

<image class='sizeModal-img' src=' {{selected.image || spec.productFirstImage}}'></image> 之前的效果

修改之后代碼如下：

<image class='sizeModal-img' mode='aspectFill' src=' {{selected.image || spec.productFirstImage}}'></image> 添加上述代碼之后效果

以下是微信小程序圖片控件的屬性說明

image

圖片。

屬性名類型默認值說明最低版本

src	String	?	圖片資源地址	?
mode	String	'scaleToFill'	圖片裁剪、縮放的模式	?
lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的image有效	1.5.0
binderror	HandleEvent	?	當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}	?
bindload	HandleEvent	?	當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

注：image組件默認寬度300px、高度225px

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

模式 值 說明
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
裁剪 top 不縮放圖片，只顯示圖片的頂部區域
裁剪 bottom 不縮放圖片，只顯示圖片的底部區域
裁剪 center 不縮放圖片，只顯示圖片的中間區域
裁剪 left 不縮放圖片，只顯示圖片的左邊區域
裁剪 right 不縮放圖片，只顯示圖片的右邊區域
裁剪 top left 不縮放圖片，只顯示圖片的左上邊區域
裁剪 top right 不縮放圖片，只顯示圖片的右上邊區域
裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區域
裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區域

轉載于:https://www.cnblogs.com/FineDay/p/9192311.html

總結

以上是生活随笔為你收集整理的微信小程序image组件中aspectFill和widthfix模式应用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。