ミニ プログラムの設計では画像の表示は必要なステップです。オンラインでの指導には限界があることがわかりましたが、私自身の設計プロセスで発生した問題を整理しました。これで、皆さんが直面する問題を解決できるはずです。
最後にある完全なコードを使用し、手順に従ってデバッグしてください。そうでない場合は、私に連絡してください。
最初に使用するコードとレンダリングを指定します:
最初に home.wxml プログラムを指定します:
<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. 画像は中央に配置されます (中央で、位置は調整可能→高さと項目の配置が可能です)
.imagesize{ display:flex; height: 600px; //flex布局高度 justify-content: center; align-items:center; //垂直居中 } .imagesize image { width:400rpx; height:400rpx; }
上の画像の高さの値 200px 400px 600px
携帯電話の画面サイズは固定されていないため、最初の 2 つはすべての携帯電話モデルに適用できるわけではありません。
ただし、画像の位置を設計するのに非常に役立ちます。
3. 画像は中央 (画面の中央) に配置されます
コード:
page{ height:100% //满屏设置 } .imagesize{ display:flex; height: 100%; //设置布局满屏 justify-content: center; align-items:center; } .imagesize image { width:400rpx; height:400rpx; }
効果を確認してください:
4. 完全なコードを入力します (前の記事にも完全なコードが含まれています。前のフォルダーに追加するだけです):
home.wxml
<view class='imagesize'> <image src="/images/2.png" class='in-image' > </image> </view>
home.wxss
page{ height:100% } .imagesize{ display:flex; height: 100%; justify-content: center; align-items:center; } .imagesize image { width:400rpx; height:400rpx; }
5. 画面を埋める:
画面を埋めることだけについて言えば、mode= 'widthFix'
追加された特定のプログラム セグメントは .wxml:
<image src="/images/img21.jpg" class='in-image' mode='widthFix'> </image>
と .wxss の変更:
page{ height:100% } .imagesize{ display:flex; height: 100%; justify-content: center; align-items:center; }
デモ用の画像を変更しました:
widthFix を使用しないレンダリングを見てください:
つまり、これは依然として非常に便利です。
これは下部タブ ウィンドウであるため、画面全体をカバーする画像は表示されません。
起動画面をデザインすることができます。適切な比率で写真を撮ることは、実際の表示効果に影響します。背景色と画像の色の違いにも注意する必要があります。デバッグ時。
推奨チュートリアル: 「WeChat ミニ プログラム 」
以上がWeChat アプレットでの画像処理 (中央、全画面)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。