CSS で画像を比例的に Div に埋めるにはどうすればよいですか?

塗りつぶされた Div にプロポーショナル画像を表示する方法

CSS では、特に次の場合、div 内の画像を完全に適合させるのが困難になることがあります。アスペクト比を維持したい場合。比例関係を維持しながら div を画像で埋めるための簡潔な解決策は次のとおりです。

オブジェクト フィッティングの利用

最新のブラウザーのほとんどは object-fit プロパティをサポートしているため、次のように制御できます。コンテナ内で画像がどのように表示されるか。このシナリオでは、次の CSS を使用できます:

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contains により、元の比率を維持しながら画像がコンテナーに収まるようになります。また、画像が切り取られたり歪んだりすることも防ぎます。

Flexbox の使用

別の方法として、Flexbox を使用することもできます。この手法を使用すると、div 内で画像を中央に配置し、柔軟にサイズ変更することができ、目的の効果を実現できます。

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

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

このシナリオでは、画像はアスペクト比を維持しながら常に div の利用可能な高さまたは幅を埋めます。

実装例

このソリューションを実装するには、適切な CSS を適用するだけです。画像を含む div:

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="CSS で画像を比例的に Div に埋めるにはどうすればよいですか?" >
</div>

注: 画像が境界外にオーバーフローしないように、オーバーフロー プロパティが div で非表示に設定されていることを確認してください。

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