1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
