ウィンドウのサイズ変更に合わせた画像のCSSリサイズ方法

1. CSSのbackground-sizeプロパティを使用する方法: この方法では、画像をウィンドウのサイズに合わせて背景として表示し、background-sizeプロパティを使用してリサイズします。

   .image-container {
    background-image: url('画像のURL');
    background-size: cover;
    background-repeat: no-repeat;
   }

   上記の例では、.image-containerというクラスを持つ要素に画像を背景として設定し、background-size: cover;を指定することで、ウィンドウに合わせて画像がリサイズされます。

2. CSSのmax-widthプロパティを使用する方法: この方法では、画像をmax-width: 100%;と指定して、親要素の幅に合わせて自動的にリサイズします。

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

   上記の例では、.image-container内のimg要素の幅を親要素に合わせて自動的にリサイズし、アスペクト比を維持します。

3. CSSメディアクエリを使用する方法: この方法では、ウィンドウの幅に応じて異なる画像サイズを適用するために、CSSメディアクエリを使用します。

   .image-container img {
    width: 100%;
    height: auto;
   }
   @media (max-width: 768px) {
    .image-container img {
      width: 50%;
    }
   }

   上記の例では、.image-container内のimg要素の幅を100%に設定し、ウィンドウの幅が768px以下の場合には50%にリサイズします。

これらは一部の一般的な方法であり、他にもさまざまなアプローチがあります。ウェブサイトやアプリケーションの要件に応じて、適切な方法を選択してください。また、CSSフレームワークやライブラリ（例:Bootstrap、Tailwind CSS）を使用することも、簡単かつ効果的な方法です。