CSS を使用してサイズを変更するときに画像のアスペクト比を維持するにはどうすればよいですか?

CSS を使用したサイズ変更中に画像の縦横比を維持する: 包括的なガイド

Web 開発の領域では、多くの場合、画像に合わせてサイズを変更する必要があります。さまざまな表示要件。ただし、望ましくない伸縮や歪みを避けるために、画像のアスペクト比を維持することが重要です。これを実現するために、CSS は洗練されたソリューションを提供します。

Object-Fit: 比率を維持するための鍵

object-fit プロパティは、置換された要素のコンテンツを制御します。画像やビデオなどのファイルは、コンテナに合わせてサイズ変更する必要があります。このプロパティを利用することで、元のアスペクト比を維持しながら画像のサイズを変更する方法を指定できます。

要素を塗りつぶしながら縦横比を維持する

要素を塗りつぶすには比率を維持しながら画像を作成するには、object-fit プロパティの「cover」値を使用します。これにより、アスペクト比が維持されるように端から余分なコンテンツを切り取りながら、要素を完全に埋めるように画像のサイズを変更するようブラウザーに指示します。

例:

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img src="https://i.sstatic.net/2OrtT.jpg">

コードのデモ

上記の例では、cover クラスは object-fit: cover プロパティを使用して、画像は幅 150 ピクセル、高さ 100 ピクセルの要素を満たすように拡大縮小されます。画像の元のサイズ (幅 242 ピクセル、高さ 363 ピクセル) にもかかわらず、指定された要素サイズ内でアスペクト比を維持するために拡大縮小およびトリミングされます。

以上がCSS を使用してサイズを変更するときに画像のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。