小程序圖片處理 居中、鋪滿屏幕

<view class='imagesize'>

<image src="/images/2.png" class='in-image' >

</image>

</view>

 

1.圖片居中(屏幕頂部):

//.wxss裏的參數

.imagesize{

display:flex; //flex佈局

justify-content: center; //水平軸線居中

}

.imagesize image {

width:400rpx;

height:400rpx;

}

 

2.圖片居中(中部,位置可調 →height 和 align-items)

page{

height:100% //滿屏設置

}

.imagesize{

display:flex;

height: 100%; //設置佈局滿屏

justify-content: center;

align-items:center;

}

.imagesize image {

width:400rpx;

height:400rpx;

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章