画像付きの記事一覧などを表示する際、画像のサイズが統一されていればそのサイズで調整しておけないいのですが、記事などはお客様が更新されることが多いので、サイズが同じになるとも限りません。画像の統一をお願いするにも画像加工ができない方もいますし、度々画像を加工するのは面倒です。
そこでCSSを使ってどのサイズの画像でもうまく表示できるように調整します。今回は画像の縦横の比率を保ちつつ画像を中央に表示する方法をいくつかご紹介します。
一番よくやるのがこれです。
See the Pen 画像中央表示 by irodory (@irodory) on CodePen.
もっと簡単にやる場合は、背景画像として設定する方法もあります。
See the Pen 画像中央表示（背景） by irodory (@irodory) on CodePen.
WordPressなどで、画像ファイルをそれぞれ設定したい時には、div要素にstyleで画像設定しこの画像部分をCMSの関数で挿入するようにします。
<div class="col-img" style="background-image: url(https://picsum.photos/640/320) ;"> </div>
ただ、背景画像は印刷するにはプリントの設定が必要の場合があるので、注意が必要です。
最後に「object-fit」プロパティーを使う方法。
See the Pen 画像中央表示（object-fit） by irodory (@irodory) on CodePen.
簡単ですね。「object-position: 横の位置 縦の位置;」で位置の調整も可能です。ただこれIE、Edgeの少し前のものには対応していません・・・。
ただjavascriptなどで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。
