ワードプレスのアイキャッチ画像をレスポンシブルにする方法

決定打を見つけた気がするので備忘録。

htmlファイルでワードプレスを転送表示させるときにアイキャッチ画像を、縦横比を統一し、かつレスポンシブルにする方法。

<div class="img img-fluid">
  <div class="waku">
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'thumb')); ?>
           </div>

吐き出したとき、アイキャッチに.thumbというクラスがつくようにする。

cssでクラス設定

.thumb{
　height: 250px;
  width: 100%;
  object-fit: cover;
}

object-fit: cover;
がミソ！

画像レスポンシブcss

背景画像は　content:
imgタグは object-fit: