アスペクト比を維持しながら画像のサイズを強制的に変更する

画像を操作する場合、多くの場合、画像のサイズを特定のサイズに変更する必要があります。ただし、アスペクト比を維持すると、画像が歪んだり引き伸ばされたりすることがなくなります。

初期試行:

最初は、指定された寸法とカスタム CSS ルールがサイズ変更に使用されました。画像ですが、アスペクト比が維持されていません:

img {
  max-width: 500px;
}

解決策:

アスペクト比を維持しながら画像のサイズを強制的に変更するには、次の CSS プロパティを使用できます:

• display: block;: 画像がページ コンテンツ内に収まるようにします。
• max-width:230px;: 画像の最大幅を設定します。 image.
• max-height:95px;: 画像の最大高さを設定します。
• width: auto;: max-width と max の範囲内で利用可能なスペースを画像が自動的に埋めることを許可します。 -heightconstraints.
• height: auto;: 画像の固有のアスペクトに基づいて高さを自動的に調整しますrate.

結果:

これらの CSS ルールを画像に適用:

This image is originally 400x400 pixels, but should get resized by the CSS:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

元のアスペクト比を維持しながら、指定された最大寸法内でサイズ変更された画像が生成されます。