WeChat アプレットでの画像処理 (中央、全画面)

ミニ プログラムの設計では画像の表示は必要なステップです。オンラインでの指導には限界があることがわかりましたが、私自身の設計プロセスで発生した問題を整理しました。これで、皆さんが直面する問題を解決できるはずです。

最後にある完全なコードを使用し、手順に従ってデバッグしてください。そうでない場合は、私に連絡してください。

最初に使用するコードとレンダリングを指定します:

最初に home.wxml プログラムを指定します:

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </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=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </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=&#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 を使用しないレンダリングを見てください:

つまり、これは依然として非常に便利です。

これは下部タブ ウィンドウであるため、画面全体をカバーする画像は表示されません。

起動画面をデザインすることができます。適切な比率で写真を撮ることは、実際の表示効果に影響します。背景色と画像の色の違いにも注意する必要があります。デバッグ時。

推奨チュートリアル: 「WeChat ミニ プログラム 」

以上がWeChat アプレットでの画像処理 (中央、全画面)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。