Flexbox を使用して Div を画像で均等に埋めるにはどうすればよいですか?

Div に画像を均等に埋め込む

レスポンシブ Web デザインを作成する探求において、div 要素に画像を埋め込む際に共通の課題が発生します。アスペクト比を維持したまま画像を表示します。画像の向きが縦向きと横向きで異なる場合、元の比率を尊重しながらシームレスにサイズを変更することが困難になります。

これに対処するために、CSS はフレックスボックスを使用したソリューションを提供します。 CSS フレックスボックスを利用すると、数行のコードで目的の結果を達成できます。

Flexbox to the Rescue

Flexbox は、柔軟で柔軟な機能を提供する CSS レイアウト モジュールです。コンテナ要素内のスペースを効率的に分散および管理する方法。この場合、アスペクト比に関係なく、画像が常にコンテナ div を満たすようにするために使用できます。

実装

次の HTML マークアップを考えてみましょう。

<div class="container">
    <img src="some-image.jpg" alt="Could be portrait or landscape" />
</div>

望ましい動作を実現するには、次の CSS スタイルを要素:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

説明

• .container:

  • display: flex: フレックスボックスを有効にします。コンテナ div.
  • justify-content: center; align-items: center;: div 内の画像を中央に配置します。
  • overflow: hidden: コンテナからはみ出す画像の部分を非表示にします。

• .container img:

  • flex-shrink: 0;: 防止しますコンテナのサイズ変更時に画像が縮小しないようにします。
  • min-width: 100%; min-height: 100%;: 画像が常にコンテナのサイズ以上に拡張されるようにします。

結果

これらの CSS スタイルを実装すると、画像はアスペクト比を維持しながらコンテナ div を自動的に埋めます。画像が縦長の場合、幅は 100% になり、高さは比例して調整されます。同様に、画像が横長の場合、高さは 100% になり、幅はそれに応じて調整されます。

以上がFlexbox を使用して Div を画像で均等に埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。