ホームページ > ウェブフロントエンド > CSSチュートリアル > アスペクト比を維持しながら画像を Div 内にぴったりと収めるにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-11-19 12:25:03
オリジナル
1075 人が閲覧しました

How to Fit an Image Snugly Within a Div While Preserving Aspect Ratio?

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%);
}
ログイン後にコピー
  1. また、すべてのブラウザでサポートされているわけではありませんが、object-fit プロパティを使用して同様の結果を得ることができます。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート