CSSを使用して画像を歪ませずにリサイズする方法

1. アスペクト比を保持したままリサイズする方法:

   .image-container {
    width: 300px; /* 希望する幅を指定 */
    height: auto;
   }
   
   .image-container img {
    width: 100%;
    height: auto;
   }

   この方法では、.image-container の幅を指定し、その内部の画像を幅いっぱいに広げることで、アスペクト比を保持したままリサイズします。

2. 画像を中央に配置し、余白を追加する方法:

   .image-container {
    width: 300px; /* 希望する幅を指定 */
    height: 300px; /* 希望する高さを指定 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
   }
   
   .image-container img {
    max-width: 100%;
    max-height: 100%;
   }

   この方法では、.image-container をフレックスボックスとして配置し、内部の画像を中央に配置します。余白が発生する可能性がありますが、画像は歪みません。

3. オブジェクトフィットを使用して画像をリサイズする方法:

   .image-container {
    width: 300px; /* 希望する幅を指定 */
    height: 300px; /* 希望する高さを指定 */
    overflow: hidden;
   }
   
   .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }

   この方法では、.image-container の幅と高さを指定し、内部の画像を幅いっぱいに広げます。object-fit: cover; を使用することで、画像が切り取られることなく領域に収まります。

これらの方法を使用することで、画像のリサイズ時に歪みを防ぐことができます。適切な方法を選択し、デザイン要件に合わせてコードを調整してください。また、レスポンシブデザインに対応するために、メディアクエリを使用して画像のサイズや配置を調整することもできます。