アスペクト比を維持しながら画像を Div 内にぴったりと収めるにはどうすればよいですか?

Div 内での画像のアスペクト比の維持

質問:

どうすれば div 内に画像をぴったりと収めることができますかアスペクト比を維持しながら要素を編集し、画像の一部が切り取られたり歪んだりしないようにしますか?

回答:

CSS を使用してこれを実現するには、次のプロパティを利用します。

img {
  max-height: 100%;
  max-width: 100%;
}

1. max-height: 100%;: 画像の最大高さをコンテナ div の 100% に設定します。これにより、画像が div の高さをオーバーフローしないようになります。
2. max-width: 100%;: max-height と似ていますが、幅が異なります。これにより、画像の最大幅がコンテナ div の 100% に設定されます。

説明:

これら 2 つのプロパティを組み合わせることで、画像は効果的に縮小されます。元のアスペクト比を維持しながら div 内に収まるようにします。画像は比例して縮小され、切り取られたり歪んだりする部分がないことが保証されます。

追加メモ:

1. 画像を div 内の中央に配置したい場合、次の CSS プロパティを追加します:

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. また、すべてのブラウザでサポートされているわけではありませんが、object-fit プロパティを使用して同様の結果を得ることができます。

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