CSSを使用してDiv内の画像のアスペクト比を保持する方法は?

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

多くの場合、アスペクト比を維持しながら div 内に画像を表示することが望ましいです。これにより、画像が歪みなく完全に表示されることが保証されます。これを実現するには、特定の CSS プロパティを利用できます。

CSS を使用した解決策:

画像が配置されている div 内で、次の CSS ルールを画像に追加します。 element:

max-height: 100%;
max-width: 100%;

これらの CSS プロパティは、画像のサイズを div の境界内に制限するようにブラウザーに指示します。 max-height プロパティは垂直サイズを制限し、max-width プロパティは水平サイズを制限します。両方のプロパティを 100% に設定すると、元のアスペクト比を維持しながら、画像が div 内に収まるように縮小されます。

例:

<div class="image-container">
  <img src="image.jpg" />
</div>

.image-container {
  width: 48px;
  height: 48px;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

この例では、画像のアスペクト比を維持しながら、48x48 画像を 48x48 div 内に収めます。画像はトリミングや歪みなしで div 内に完全に表示されるようにサイズ変更されます。

以上がCSSを使用してDiv内の画像のアスペクト比を保持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。