【CSS】object-fitで画像を正方形にトリミングできる!

f:id:Kawan0116:20210508191723p:plain

今、ポートフォリオサイトを作っています。

特にネットに公開することはないのですけどね。

実力試しとCSSを忘れないようにするために作業しています。

今日、一番ポイントとなったのは、画像の正方形トリミングです。

まぁ、2~3枚程度なら手動でトリミングしても良いかと思いますけどね。

これが100枚、200枚となったら手動でトリミングするのは限界があります。

そこで、今日の主役である「object-fit」です。

画像を正方形にトリミングしたい

コツコツとサンプルサイトを作り始めて現段階で7サイト目です。

こんな感じで作ってます。

f:id:Kawan0116:20210508185936p:plain

ほぼ完成ですけどね。高さの異なるコンテンツをタイル状に並べました。

CSS的にはこれを使います。

column-count

親要素に対して、上のCSSをあてます。

5段組みにしたい場合は、こんな感じで書きます。

column-count:5;

これで完成ですが、コンテンツが見切れてしまう場合がありますので、子要素に以下をあてます。

break-inside: avoid;

話が反れましたが、とにかく正方形にトリミングしたかったのです。

ぶっちゃけ、正方形に手動でトリミングしていたのはここだけの秘密(笑)。

でも、いい加減何とかしたいなということで、重い腰を上げました。

object-fitを使ってみる

まぁ、「object-fit」を使えば簡単です。imgに対して、「object-fit: cover」を指定します。

object-fitには色々なモノがあるので、詳しく知りたい方はネット検索してください。

ちなみに、widthとheightを指定すると、画像がグニャッとなりますが、object-fitを使えば解決です。

画像を正方形にしたい場合は、object-fitが大活躍します。

object-fit以外の方法を試す

時間があったので、object-fit以外の方法も探ってみました。

その結果、あったんですけどレスポンシブ対応でない場合もあり。

そもそも効かない場合もあり。

3時間ほど格闘しましたが、「あ、素直にobject-fitを使おう!」って思いましたね。

object-fitは便利ですねぇ~。

画像をわざわざ正方形に手動でトリミングする必要がありませんからね。

object-fitはIEでは使えない

ただ、object-fitの欠点は、IEで使えないという点です。

でも大丈夫。object-fitをIEで使える方法があるのです。

詳しく知りたい人は「object-fit ie」とかで検索してみて下さい。

情報が沢山出てきますので、確認されることをオススメします。

あくまで、object-fitを使いたい人はですけどね。

結果的に・・・

今後、正方形にトリミングするときは、object-fitを使います。

とにかく便利。

ソフトで正方形にトリミングするのは辛すぎる・・・。

なので、object-fitを使います。

さいごに

object-fitには様々なプロパティがあります。

状況に応じて対応すれば良いかと思います。

僕の場合、正方形は「object-fit: cover」で対応しています。

先ほど書いたように、IEを無視するんだったら何のためらいもなく単純にobject-fitを使えば良いかと思いますね。