object-fit プロパティでトリミング＆サイズ指定 2020.5.19

元の画像がこちらです。

CSS を使ってこの画像を正方形にトリミングして表示してみます。

トリミング＆サイズ指定の手順

１．画像ブロックに 追加 CSS クラス img-object-fit を指定する。

２．カスタムCSS に以下のように入力する。← 2026.5.12 CSS を調整

.wp-block-image.img-object-fit img{
    width: 300px;
    height: 300px !important;
    object-fit: cover;
}

円形に切り抜き

さらに、

border-radius: 50% !important;

を追加すると、円形に切り抜きできます。