CSS を使用して画像の高さを自動的に調整する方法

ウォーターフォール フローなどの画像リスト レイアウトでは、DIV で画像の幅と高さを制御するために CSS を使用することがよくありますが、実際、そのようなレイアウトは非常に簡単です。今日は詳しく。

このような DIV CSS レイアウトに遭遇した場合、実際には画像の幅を制御するだけでよく、画像の高さを設定する必要はありません。つまり、画像の高さは自動的に設定されます。スケーリング率に適応します (高さが設定されていない場合、高さの値はデフォルトで autoadaptive に設定されます)。

上記のように、CSSで「.imgbox」というDIVボックスを追加し、画像の幅は252pxです。このとき、オブジェクト内の画像の高さを自動的に拡大縮小するようにCSSを記述する方法です。幅:

.imgbox img{width :252px}

それは単純ですCSSセレクターは、CSSの高さ（height）スタイルを設定せずにDIVボックス「.imgbox」内の画像の幅を制御できます、デフォルトの画像が幅に応じて適応的に拡大縮小されるようにします。

概要:

初心者の場合、幅と高さが設定されていない場合はデフォルトで適応されることを忘れている可能性があるため、画像の幅を設定するという問題に遭遇し、高さを設定する必要があると考える可能性があります。実際、CSS レイアウトにおける固定画像幅と適応高さの要件の下では、CSS は幅の値を設定するだけでよく、高さは設定を追加せずに目的のレイアウト効果を実現できます。

画像の高さと幅がレイアウト内で固定されている場合、画像がどれほど大きくても、または比例しても、レイアウト内の画像の幅と高さは固定されます。この場合、固定幅と高さを設定する必要があります。同時に画像の高さの値も調整します。

これらの分析を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

DIV を高さに適応させる方法

CSS を使用して HTML で div を非表示にする方法

フロントエンドのレスポンシブ レイアウト、レスポンシブ イメージ、セルフの詳細な説明-製グリッドシステム

以上がCSS を使用して画像の高さを自動的に調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。