首頁 > 微信小程式 > 小程式開發 > 小程式圖片如何鋪滿整個螢幕?

小程式圖片如何鋪滿整個螢幕?

烟雨青岚
發布: 2020-06-16 14:48:09
原創
6447 人瀏覽過

小程式圖片如何鋪滿整個螢幕?

小程式圖片如何鋪滿整個螢幕?

鋪滿螢幕,主要用到標籤裡面的mode='widthFix'屬性

具體加在的程式段是.wxml:

<image src="/images/1.jpg" class=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>
登入後複製

以及.wxss的改變:

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
}
登入後複製

演示:

小程式圖片如何鋪滿整個螢幕?

##看看不加widthFix的效果圖:

小程式圖片如何鋪滿整個螢幕?

所以還是很有用的。

這裡由於是底部tab窗口,所以沒有顯示完整螢幕覆蓋的圖。

可以設計啟動畫面,當然截取適當比例的圖會影響實際顯示效果,還有就是背景顏色與圖片顏色的不同需要你調試時候注意一下。

推薦教學:《

微信小程式

以上是小程式圖片如何鋪滿整個螢幕?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板