CSSを使用してアスペクト比を維持したまま画像をDIVにフィットさせる方法

方法1: paddingとpositionを使用する方法

この方法では、親のDIV要素にpadding-topプロパティを設定し、アスペクト比を調整します。画像はposition:absoluteで子要素として配置され、親DIVの内側に収まるようにします。

<style>
  .container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* アスペクト比を設定する、例えば16:9の場合は56.25% */
  }
  .container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="container">
  <img src="画像のURL" alt="画像の説明">
</div>

方法2: background-imageを使用する方法

この方法では、背景画像としてDIV要素に画像を設定します。background-sizeプロパティを使用して、画像がDIVにフィットするように調整します。

<style>
  .container {
    width: 100%;
    height: 0;
    padding-top: 75%; /* アスペクト比を設定する、例えば16:9の場合は56.25% */
    background-image: url('画像のURL');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
</style>
<div class="container"></div>

方法3: flexboxを使用する方法

この方法では、親のDIV要素にdisplay:flexを設定し、子要素のアスペクト比を保つように調整します。

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0;
    padding-top: 75%; /* アスペクト比を設定する、例えば16:9の場合は56.25% */
  }
  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="container">
  <img src="画像のURL" alt="画像の説明">
</div>

これらの方法を使用すると、画像がDIV要素内にフィットし、アスペクト比が維持されます。それぞれの方法を使って、自分の要件に合った最適な方法を選択してください。