WebページHTML 5のHTML XNUMX画像適応スクリーン画像比例スケーリングコード

モバイルインターネットの急速な発展とWeChatマーケティングの普及に伴い、携帯電話は生活に欠かせないツールとなった。

ウェブサイトのテンプレートとしては、 WordPressのレスポンシブテーマの使用をお勧めします。

CSS イメージ アダプティブとはどういう意味ですか?

CSS イメージ アダプティブとは、CSS コードを使用して、HTML Web ページ内のイメージを作成することを意味します。

次に、陳偉良さんが画像のサイズを比例的に拡大縮小するためのCSSコードを紹介します。^_^

CSS 画像の高さと幅の適応コード

html に画像を挿入します。

画像を幅と高さを固定するのではなく、画面の小さなサイズに合わせたい場合。

WordPress テーマの style.css ファイルに次のコードを追加できます ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

ここに声明max-width最大幅ルール

• すべての画像が最大 100% で表示されるようにします (つまり、画像はそれぞれの画像と同じ大きさでしか表示できません)。
• この時点で、画像を含む要素 (たとえば、画像を含む body または div) が画像固有の幅よりも小さい場合、画像は使用可能な最大スペースを埋めるようにスケーリングされます。

width:auto;自動幅を意味します

\9 ハックCSSの書き方です。

• このように、通常のcssコードに「\9」を追加すると、IEブラウザのみが認識することができ、他のブラウザはこのステートメントを無視します。
• これにより、ブラウザーの差別化が実現され、互換性のあるブラウザーの目的が実現します。

width: 100% を使用しないのはなぜですか?

画像の自動スケーリングを実現するために、より一般的に使用される width プロパティも使用できます。width：100％。

ただし、この規則はここでは適用されません。

• このルールにより、コンテナーと同じ幅で表示されるためです。
• コンテナーが画像よりもはるかに広い場合、画像は不必要に引き伸ばされます。

注意事项

CSS セレクターとはクラスとIDの違いは何ですか？以下のチュートリアルは▼について話します

🔗CSS セレクタークラスと ID の違いは何ですか? HTML での id と class の使用

モバイル Web サイトで MP4 ビデオを再生するようにページを調整するにはどうすればよいですか?下記のリンクをクリックしてください▼

🔗H5ウェブページMP4をページに適応させるには？モバイルウェブサイトでビデオを再生するためのHTMLコード