画像の比率を保つ基本的なコーディング方法については以下をご覧ください。

比率を保ちながら画像を拡大縮小させる方法

・・・

「PCとSPで管理画面から画像を切り替えたい」

という要望は、WordPress構築をしていると良くあります。

その要望が、以下のようなカード型レイアウトに対しであれば少し注意が必要です。

PCとSPで画像を切り替えかつ、画像の比率を保つ方法

今回はそのような要望に応えるためのコーディング方法をご紹介します。

結論(picuterタグとobject-fit)

いくつか方法がありますが以下のやり方がおすすめです。
※ポイントとなる部分を薄くハイライトしています

まず、HTMLは以下のようにします。

picuterタグとobject-fit
<a href="" class="card">
  <div class="card-inner">
    <div class="card-img">
      <picture>
        <source srcset="/img/card-img.jpg" media="(min-width: 768px)" /><!-- 幅768px以上なら表示 -->
        <img src="/img/card-img-sp.jpg" alt="" />
      </picture>
    </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>

そして、css(scss)は以下のようにします。

.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の部分はお好みで調整
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;//画像を見切れさせたくない場合はcontain
    }
  }

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

解説(HTML)

PCとSPの画像切り替えをするために、pictureというHTMLタグを使用しています。

pictureタグは、以下のような使い方をします。

<picture>
  <source srcset="○○px以上で表示する画像のURL" media="(min-width: ○○px)" />
  <source srcset="△△px以上で表示する画像のURL" media="(min-width: △△px)" />
  <img src="上記の条件にマッチしなかった時に表示する画像のURL" alt=""/>
</picture>

この特徴を利用して、今回のコーディングでは以下の部分で使用しています

    <div class="card-img">
      <picture>
        <source srcset="/img/card-img.jpg" media="(min-width: 768px)" /><!-- 幅768px以上なら表示 -->
        <img src="/img/card-img-sp.jpg" alt="" />
      </picture>
    </div>

WordPress構築で、PCとSPで画像を変えたいという要望があった際には、それぞれを表示するためのカスタムフィールドを作成します。

そのカスタムフィールドの値を取得して、pictureタグのsrcset属性やimgタグのsrc属性に出力してあげてればOKです

また、PCとSPで画像切り替えを行う別のやり方で、
pcクラスとspクラスを用意し(名前は任意)、それぞれをdisplay:none;で消して切り替える方法があります。

これでもいいのですが、display:none;の場合は、たとえ要素を消していたとしても、

PCとSP両方の画像がページ表示時に読み込まれてしまうので、サイトパフォーマンス的にあまりよくないです。

一方、picuterタグを使用した場合は、どちらか片方しか読み込まれないので、サイトパフォーマンス的に優しいです

pictureタグはIE非対応です。
IEで使いたい場合はポリフィルを導入すると使えるようになります。
▼参考
https://qiita.com/kinshist/items/9ec9b8c6512879da3fcd

解説(CSS/SCSS)

padding-topを%で指定し、画像表示領域は比率を保って拡大縮小されるようになっています。

これについてよくわかない方は以下の記事を参考にしてください。
比率を保ちながら画像を拡大縮小させる方法

その表示領域を親要素として(position:relativeにして)、imgタグをposition:absolute;にし、親要素に対していっぱいに広げます。

しかし、このままだと画像自体の比率が崩れる可能性があるので、object-fitを使用します。

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

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

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