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

モバイルインターネットの普及により、WeChatマーケティング携帯電話の普及は人生なくてはならないツール。

ウェブサイトを構築するテンプレートを使用することをお勧めしますWordPressアダプティブ テーマ:

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

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

次、チェン・ウェイリアンCSS img プロポーショナル スケーリング コードを共有します ^_^

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 とクラスの使用法

CSSセレクタクラスとIDの違いは何ですか? HTML での id と class の使用法 Chen Weiliang は現在 SEO を実行し、Web サイトの WordPress テーマを最適化しています。HTMLやCSSの基本的な知識はある程度身につけたものの、しばらく操作しておらず、特にCSSの部分が...

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

H5 WebページMP4はどのようにページに適応しますか？モバイルWebサイトはビデオHTMLコードを再生します

ビデオ マーケティングは、オンライン マーケティングの不可欠な部分です。多くのオンライン プロモーション担当者は、トラフィックを促進するためにビデオを「バイラル マーケティング」と組み合わせて使用​​することがよくあります。WeChat マーケティングをビデオ マーケティングと組み合わせれば、新しいメディアやソーシャル e コマースのコピーライティングのコンバージョン率をさらに向上させることができます。私は友達がたくさんいる...