起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがあります。構成側から画像を返し、幅は変更されず (750)、高さが画像に合わせて調整されることを期待します。 私は思った// 説明を簡単にするために、css をスタイル属性としてバインドします [非推奨] && src の値をハードコードします [後でインターフェイスによって返される値に変更できます] <view style="width:100%;"> <画像 src="{{src}}"></画像> </ビュー> 最初に考えたのは、コンテンツ領域の幅を 100% に設定すると画面の幅が自動的に埋められ、高さは適応されるというものでした。 実際の効果: 画像が占めるスペースは、画面幅 x 0 解決コア: 画像の高さを取得する方法を解く 基本計画 ポイント: 画像が読み込まれた後、対応する画像情報を取得します。 アプレット開発ドキュメントを確認したところ、次のように、読み込みが成功した場合のコールバックがあることがわかりました。 デモは次のとおりです。 // wxml <view style="width:100%;"> <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image> </ビュー> //js ページ({ データ: { 画像の高さ: 0, 画像幅: 0 }, ロード成功(e){ const { 詳細: { 幅, 高さ } = e this.setData({ 画像幅: 幅、 画像の高さ:高さ }) } }) まずは効果を見てみましょう: 考えてみてください。適応させる必要がある画像が 100 枚ある場合、面倒な setData() 呼び出しが多数発生し、パフォーマンスの問題も発生するのではないでしょうか。 高度なソリューション 友人に思い出させられて、ミニプログラムの画像には、画像の切り取りと拡大縮小を設定するために使用できるモードと呼ばれるプロパティがあることを知りました。 mode属性に指定できる値は次のとおりです。 では、早速実際の効果を見てみましょう。 // 750x110 画像 <view style="width:100%;" > <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像> </ビュー> // 750x480 画像 <view style="width:100%;" > <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像> </ビュー> 750x110 のレンダリングをご覧ください: 750x480 のエフェクト画像を見てみましょう。 この時点では、src の値をインターフェースによって返される値に変更するだけで、固定幅と適応高さの要件が満たされます。 やっとこのプロパティは主に画像の適応性を実現するためのものです。言い換えれば、主に画像が歪まないようにするためのものです。 WeChatミニプログラムで画像の幅と高さを取得する方法についての記事はこれで終わりです。WeChatミニプログラムで画像の幅と高さを取得する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明
>>: nginx と Tencent Cloud の無料証明書を使用して https を作成する方法
Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
バージョン間でのコマンドの違い: innodb ステータスを表示\G mysql-5.1 エンジン ...
g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...
ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...
問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...
Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...
目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...
序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...
MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...
この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...