CSS画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。いってPhotoshopを使ってすべての画像をリサイズできない...ということもあるでしょう。そんな時はCSSでトリミングすると楽です!今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。250px;}CSSでこのように画像に対してサイズを指定すると...こんな感じでグチャッとつぶれて表示されちゃいます...。画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。レスポンシブ対応!高さを固定した画像の横幅を伸縮させる縦と横のサイズを固定するのではなく、縦の高さのみを固定して、横幅は画面や親要素いっぱいに表示させたい場面もあるでしょう。指定で高さを固定できますが、そのままでは画像がつぶれてしまいます。加えることできれいに表示できますね。画像の縦横比を保持したまま画像の中央でトリミングして表示できるようになりましたが、毎回画像の中央にフォーカスしたいとは限りませんね。プロパティーを設定しましょう。