アーカイブページのサムネイルなど、複数の画像を同じサイズやアスペクト比で表示させたいことがあるかと思いますが、今回はそんな時に便利な「object-fit」というCSSプロパティの使用例を見ていきたいと思います。  

画像を任意のサイズでトリミングできる「object-fit」プロパティ

このプロパティは特定のサイズに合わせて画像や動画などをどのように表示させるかを指定することができます。イメージとしてはbackground-sizeに近いような感じです。使い方も簡単でimgタグやvideoタグに対して、プロパティを指定するだけです。ただし、基準となるwidthとheightを指定する必要があります。必要に合わせて「object-position」プロパティを使うことでトリミングの基準位置を調整することも可能です。

// HTML
<img class="clipping-image" src="../example.jpg">

// CSS
.clipping-image {
 width: 280px;
 height: 280px;
 object-fit: cover;
 object-position: 50% 50%;
}

  object-fitプロパティに使える値には下記のものがあります。表示させたい要件に合わせて使い分けていきます。  

fill	指定のサイズを埋めるように表示されます。トリミングはされず、画像の縦横サイズのアスペクト比を無視します。アスペクト比が変わる場合は画像が歪みます。
contain	指定サイズに縦横のサイズの大きい方が合うようにリサイズして表示されます。トリミングはされずに画像全体を表示しますがアスペクト比が変わる場合は上下もしくは左右にスペースができます。
cover	指定サイズに縦横のサイズの小さい方が合うようにトリミングされて表示します。画像全体は表示されずに原寸もしくは拡大されて表示されます。
none	指定サイズとは関係なく画像の原寸サイズで表示され、指定サイズより大きい場合はトリミングされます。
scale-down	画像が指定のサイズより大きい場合にはcontainを、指定サイズより小さい場合にはnoneが適用されます。

  また、デフォルトは中央を基準にトリミングされますが、「object-position」の値を変更することでトリミング位置を調整することができます。下記のようにx軸とy軸の座標を指定するだけで大丈夫です。

object-position: [x軸の起点] [y軸の起点];

object-position: 0% 0%; // 左上を基準にトリミング
object-position: 50% 50%; // 中央を基準にトリミング
object-position: 100% 100%; // 右下を基準にトリミング

  backgroundプロパティや、positionプロパティを駆使すれば近いものになるようできますが、このプロパティではimgタグだけでなくvideoタグにも適用できるので簡単に動画のトリミングも実現可能です。実際のサンプルはこちらに用意しましたので参考にどうぞ。   ちなみにですが、このobject-fitのプロパティはIEでは対応していないので注意が必要です。またOperaの場合はベンダープレフィックスが必要になります。  

---

  いかがでしょうか、カードタイプのUIや、メディアサイトのサムネイル、ギャラリーサイトなどにも使えそうですね。特性的にもレスポンシブデザインとの相性も良いですね。簡単に画像のトリミングができるのでぜひ試してみてはいかがでしょうか。   （参考にさせて頂いたサイト） object-fit - CSS: カスケーディングスタイルシート | MDN