Flexbox を使用してアスペクト比を維持しながら画像を Div に埋め込むにはどうすればよいですか?

Div へのプロポーショナル画像の充填

目標は、画像のアスペクト比を維持しながら div を画像で埋めることです。前のスレッドとは異なり、方向に関係なく、画像が常に div を埋めるようにします。

解決策: Flexbox

これを実現するには、CSS を活用します。 flexbox:

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

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

説明:

• 表示するコンテナ div を設定します: コンテンツをフレックスして中央に配置します。
• フレックスを指定します画像の縮小を防ぐには、shrink: 0 を設定します。
• 設定画像が div を埋めるように min-width: 100% および min-height: 100% を指定します。

例:

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

結果は次のようになります。アスペクト比を維持しながら div を満たす画像。縦向きでも横向きでも、画像はスペース全体を占めます。

以上がFlexbox を使用してアスペクト比を維持しながら画像を Div に埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。