微信小程序圖片布滿整個(gè)窗口 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序圖片布滿整個(gè)窗口

發表時間:2020-10-19

發布人:葵宇科技

浏覽次數:52

微信小程序圖片布滿整個(gè)窗口

在做微信小程序或者微信公衆号前端時候,經常遇到一張圖片當做背景,布局整個(gè)窗口,有時圖片不能占滿窗口

<view class="imagediv">
		<image src="/static/image/start.png" mode="widthFix" class="imagetp"/>
</view>

設置樣式

.imagediv{
		position: absolute;
		width: 100%;
		height: 100%;
	} 
	.imagetp{
		width: 100%;
		height: 100%;
	} 

以上代碼,不能有效讓圖片占滿窗口,因為image标簽會默認設置
display:inline-block;,對應的圖片高度會有一個(gè)值height:66rpx;
此時,需要在本頁面中(zhōng)圖片樣式中(zhōng)新增display:initial;

.imagetp{
		width: 100%;
		height: 100%;
		display: initial;
	} 

相關(guān)案例查看更多