こんにちは！ケインコスゲです。
今回は「CSSのobject-fitを使って大きさが違う画像たちを正方形トリミング（レスポンシブ対応）して並べる方法」という内容でブログを書いてみたいと思いみます。
Web制作をする時に、いくつかの画像を正方形で並べたい時ってありますよね。
そんな時に便利なのがCSSのobject-fitというプロパティ。
このブログ執筆時点ではInternext Exploler11に未対応のため、IE11まで対応させる場合はとある方法を使う必要があるのですが、そのあたりを加味しても、ちょこちょこobject-fitで画像トリミングを実装するケースも出てきているようです。
さて、そんなCSSのobject-fitですが、さすがにインターネット上で調べてみると関連した情報も増えてきているのですが、意外とまだないのが「object-fitを使ってレスポンシブ対応をさせる」方法です。
object-fitについて調べていると、「画像の縦横サイズを特定のサイズに固定した上で正方形トリミングをする」例はよく見かけるのですが、レスポンシブ対応をさせるというところまで紹介している情報が見当たらなかったので、今回ブログにしてみようと思いました！
目次
CSSのobject-fitを使って大きさが違う画像の正方形トリミング（レスポンシブ対応）を実装するための元となるコード
まずは、CSSのobject-fitを使って大きさが違う画像の正方形トリミング（レスポンシブ対応）を実装する上で、今回取り扱う実例のコードを紹介したいと思います。
上記のように、画像の縦横比率がバラバラのものを6枚（2行3列）並べたい、しかも正方形にトリミングした上で、レスポンシブ対応をさせたい、こんな時にどうCSSで実装すれば良いのかというのを紹介するのが今回のブログの本題だと思ってください！
CSSのobject-fitを使って大きさが違う画像の正方形トリミング（レスポンシブ対応）を行うことができるサンプルコード
それでは、CSSのobject-fitを使って大きさが違う画像の正方形トリミング（レスポンシブ対応）を実装するためのサンプルコードを紹介したいと思います！
今回は、ブラウザ幅が768px以下だった時に画像の縦横比率がバラバラのものを6枚（2行3列）正方形にトリミングした状態で並べたサンプルコードを紹介しています！
ポイントとなるのが、画像の幅や高さをvwで設定しているという点です！
CSSのvwとは、ブラウザ幅を基準とした時に、対象となるHTMLのプロパティ（指定したHTMLの文字サイズ・幅・高さなどですね）を何%の比率で表示したいか、という考え方で大きさを指定することができるCSSの単位です。
%と似ていますが、%との違いとしては、
- ％・・・親要素（親HTML）を基準とする
- vw・・・ブラウザの幅を基準とする
というものがあります。vwの他にも「vh」といって、「ブラウザの高さを基準として対象となるHTMLのプロパティ（指定したHTMLの文字サイズ・幅・高さなどですね）を何%の比率で表示したいか」を指定することができるというCSSの単位もあります。
今回はvwを画像の幅や高さの単位として用いることによって、画像のサイズが可変しつつ正方形にトリミングした状態をキープすることができる、というものになっているのです！
ちなみに、サンプルコードで出てきたvwの部分が「33.333vw」となっていると思うのですが、なにゆえ33vwになっているのかというと、
「ブラウザ幅480pxの時に6枚（2行3列）並べている画像の幅と高さは160pxにしたい」というデザイン上の基準を設けていたからなんですね！
今回ご紹介した方法は、必ずしもみなさん一律で33vwにしなければならないというわけではないので、もし今回ご紹介した方法をご自分でも試してみたいという方は、
「デザイン上、ブラウザ480pxの時に6枚の画像を隙間なく2行3列に並べたい → 480 ÷ 3（列） = 160pxの正方形サイズに画像の大きさを整えたい → 160 ÷ 480 = 0.33333 → 1を100vwと考えるため、0.33333 = 33.333vw（小数点以下を今回考えました）」
この考え方を参考にして、ご自分で数値を計算してみてくださいね！
まとめ
ということで、今回はCSSのobject-fitを使って大きさが違う画像たちを正方形トリミング（レスポンシブ対応）して並べる方法をご紹介いたしました！
今回の内容はobject-fitとは何かというものを紹介するためのものではないので、object-fitについてご存知でない方はインターネット上で色々と紹介されている記事を参考にしていただきたいですが、僕もそのうちobject-fitに関する記事も書いてみたいと思います！
ありがとうございました！
