1. 程式人生 > >小程序圖片顯示問題

小程序圖片顯示問題

保持 問題 系統 需要 完全 適應 dev auto 直接

先來一波官方教程https://developers.weixin.qq.com/miniprogram/dev/component/image.html

今天在小程序中用到image組件的時候,我直接使用是設置只圖片的寬,想讓圖片高度自適應,結果發現系統對圖片有默認的寬高

技術分享圖片

然後我重置了圖片高度為height:auto;然而圖片直接看不到了,顯示圖片高度為0,就好像圖片只是一個背景圖片,不設置高就不會顯示;

此時,我想當然的會重溫一下小程序圖片組件的教程,根據需要設置了image組件屬性mode=‘widthFix‘,最終解決了我的問題

根據我的理解:由於小程序對背景圖片的支持有限制,因此大大放寬了image的功能,仿佛是兩者之間的結合,

    當image有確定的寬高值時,就會不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素,相當與mode=‘scaleToFill‘;

    而mode的屬性值就類似於css中對background-size與background-position的設置

小程序圖片顯示問題