この記事では以下のよくあるカード型デザインを例にコードを紹介します

結論

画像が動的に変わることを想定してコーディングした場合、以下の様にコーディングするといいでしょう

<a href="" class="card">
  <div class="card-inner">
    <div class="card-img" style="background-image: url(/img/card-img.jpg);"></div>
    <div class="card-body">
      <time class="card-time" datetime="YYYY-MM-DD">YYYY/MM/DD</time>
      <p class="card-title">テキストテキストテキストテキスト</p>
    </div>
  </div>
</a>
.card {
  display: block;
  max-width: 400px;//お好みで調整
  box-shadow: 5px 5px 20px rgba(196, 196, 196, 0.5);//お好みで調整
  background-color: #F5F6F8;//お好みで調整

  .card-inner {
    padding: 15px;//お好みで調整
  }

  .card-img {
    padding-top: (3 / 4 * 100%);//今回のメインテーマ★(3 / 4の部分はお好みで調整)
    background-repeat: no-repeat;//今回のメインテーマ★
    background-size: cover;//今回のメインテーマ★
    background-position: center;//今回のメインテーマ★
  }

  .card-time {
    font-size: 12px;//お好みで調整
    color: #767676;//お好みで調整
  }
  .card-title {
    color: #333;//お好みで調整
    font-size: 14px;//お好みで調整
  }
}

解説

まずはHTML構造やCSSの記述についてザックリ解説します

ざっくり概要

ポイントは以下です

background-imageを使用していますが、最近はobject-fitを使ったやりかたでコーディングしています！

▼HTML

<div class="card-img" style="background-image: url(/img/card-img.jpg);"></div>

▼css(sass)

  .card-img {
    padding-top: (3 / 4 * 100%); //(3 / 4の部分はお好みで調整)
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

まず、htmlでは画像をbackground-imageとして指定します。

次に、css(sass)にて、その画像をbackground-size:cover; で配置します。

background-size:cover;は、
画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示させます。
（表示領域から溢れ出た画像はトリミングされ隠れます）

background-size:contain; は、
画像の比率を保ったまま、表示領域内に画像が全て収まるようにして表示されます。
（画像をすべて見せたいECサイトのコーディングの場合は、containにしましょう）

ここで、background-imageを設定するためには表示領域に高さが必要ですよね。

高さをpxで指定すると画面幅が拡大縮小したときに表示崩れが起きる可能性があるため、%で指定します。

それが以下の部分です。

  .card-img {
    padding-top: (3 / 4 * 100%); //(3 / 4の部分はお好みで調整)
  }

padding-topで%を指定すると親要素の横幅に対する相対的な値になります

padding-topを%で指定すると、親要素の横幅に対する相対的な値となります

まずこれを理解してください。

以下の図のように親要素と子要素があったとします
※子要素が見えやすいように高さを50pxとしているだけですので無視してください。

ここから、子要素にwidth:100%;を指定した後の図が以下です。
（子要素がdisplay:block;の場合は自動的にwidth:100%;になります。）

子要素の横幅は親要素と同じ200pxになります。
ここまでは簡単ですね^^

つづいて、子要素に対して、padding-top:50%;を指定してみます

padding-topを%で指定すると、親要素の横幅に対する値となります。

そのため、子要素の高さは100pxとなります。

子要素の高さを親要素の横幅に対して4(親) : 3(子)の比率にしたい場合は以下のような計算式になります。

こんな感じです。

まだピンとこない人は以下の計算式を覚えちゃいましょう。

padding-top: (子要素の高さ / 親要素の横幅 * 100%);

先ほどまでの図では、わかりやすいように親要素の幅を200pxとしていましたが、
実際のレスポンシブコーディングでは親要素の幅も%などの相対値にします（pxはmax-widthとかに使用します）

padding-topを%で指定して子要素の高さを取ることで、親要素の幅が変わるたびに、それに連動して比率を保つようにして子要素の高さも変わるというわけです。

こうして、横幅と高さを確保した領域に、background-imageを指定し、
background-size:cover;とすることで、
画面幅を拡大縮小しても比率崩れを起こすことなく画像をいい感じに表示させることができます。

また、WordPress化を意識した際には、どんなサイズの画像が管理画面で選択されても、比率崩れを起こすことなく表示領域内に画像を表示させることが可能になります。

✅background-imageではなくobject-fitを使用する場合

background-imageで画像を表示していますが、imgタグを置き、それをabsoluteで絶対配置する方法でもOKです

padding-topの記述はこちらも同様にする必要がありますが、このほうがシンプルなので最近はこちらを使用しています！

<a href="" class="card">
  <div class="card-inner">
    <div class="card-img">
      <img src="/img/card-img-sp.jpg" alt="" />
    </div>
    <div class="card-body">
      <time class="card-time" datetime="YYYY-MM-DD">YYYY/MM/DD</time>
      <p class="card-title">テキストテキストテキストテキスト</p>
    </div>
  </div>
</a>
  .card-img {
    padding-top: (3 / 4 * 100%);// 3 / 4の部分はお好みで調整
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;//画像を見切れさせたくない場合はcontain
    }
  }

ただ、imgタグをそのままabsoluteで配置しても画像自体の比率が崩れる可能性があるため、

object-fit:cover（またはobject-fit:contain）を指定する必要があるのでそこだけ注意です

なお、object-fitはIE非対応です。
IEに対応する場合はポリフィルを読み込む必要があります。
▼参考
https://www.webcreatorbox.com/tech/object-fit