HTMLとCSSを使用して画像を親要素（div）にリサイズする方法

CSSのbackground-sizeプロパティを使用する方法: この方法では、画像をdiv要素の背景画像として設定し、background-sizeプロパティを使用してリサイズします。

<div class="container">
  <!-- 画像を背景画像として設定 -->
  <div class="image"></div>
</div>

.container {
  width: 100%; /* 親要素の幅に合わせる */
  height: 0; /* 高さを0に設定し、padding-bottomでアスペクト比を保持 */
  padding-bottom: 50%; /* 画像のアスペクト比を設定 */
  background-image: url('画像のURL');
  background-size: cover; /* 画像をdiv要素に合わせてリサイズ */
  background-repeat: no-repeat;
  background-position: center center;
}

CSSのobject-fitプロパティを使用する方法: この方法では、img要素を使用し、object-fitプロパティを使用してリサイズします。

<div class="container">
  <!-- 画像をimg要素として追加 -->
  <img src="画像のURL" alt="画像">
</div>

.container {
  width: 100%; /* 親要素の幅に合わせる */
  height: 0; /* 高さを0に設定し、padding-bottomでアスペクト比を保持 */
  padding-bottom: 50%; /* 画像のアスペクト比を設定 */
  position: relative; /* 相対位置指定 */
}
.container img {
  position: absolute; /* 絶対位置指定 */
  width: 100%; /* 幅を親要素に合わせてリサイズ */
  height: 100%; /* 高さを親要素に合わせてリサイズ */
  object-fit: cover; /* 画像をdiv要素に合わせてリサイズ */
}

これらの方法を使用すると、画像を親要素（div）にリサイズすることができます。適用したい方法を選んで、必要に応じてCSSのスタイルを調整してください。また、上記のコード例では画像のアスペクト比を保持するためにpadding-bottomを使用していますが、必要に応じて他の方法（例: JavaScriptを使用した動的なリサイズ）を使用することもできます。

以上が、HTMLとCSSを使用して画像を親要素にリサイズする方法の例です。