微信小程序的圖片image有默認的寬高：width: 320px和height: 240px，
我遇到的業(yè)務場景是寬度100%高度自適應
所以
1.寬度設(shè)置成100%，
.img{width: 100%;}
2.設(shè)置mode屬性 mode="widthFix"，
<image class="img" src="../../xxxx/xxxxx.png" mode="widthFix">mode——圖片裁剪、縮放的模式，默認值：scaleToFill，有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
官方文檔：文章來源：http://www.zghlxwxcb.cn/news/detail-477879.html
scaleToFill 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
widthFix 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix 縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變 2.10.3
top 裁剪模式，不縮放圖片，只顯示圖片的頂部區(qū)域
bottom 裁剪模式，不縮放圖片，只顯示圖片的底部區(qū)域
center 裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域
left 裁剪模式，不縮放圖片，只顯示圖片的左邊區(qū)域
right 裁剪模式，不縮放圖片，只顯示圖片的右邊區(qū)域
top left 裁剪模式，不縮放圖片，只顯示圖片的左上邊區(qū)域
top right 裁剪模式，不縮放圖片，只顯示圖片的右上邊區(qū)域
bottom left 裁剪模式，不縮放圖片，只顯示圖片的左下邊區(qū)域
bottom right 裁剪模式，不縮放圖片，只顯示圖片的右下邊區(qū)域
?文章來源地址http://www.zghlxwxcb.cn/news/detail-477879.html
到了這里，關(guān)于小程序 image標簽 默認寬高問題，如何實現(xiàn)高度自適應的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
