1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

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

[shintarowfresh]

エッジ頑張れよマジで。IEはもういいとしてもエッジよ。

[pokotanu]

便利なCSSを知るたびにIE/Edgeへのヘイトが増す。

[imaginaration]

Edge未対応で、お祭り会場から撤収ムード。

[nibushibu]

MSはもうブラウザ開発あきらめなよ…

[free_rider]

あっもしかして「font-family: 'object-fit: contain;'」でいける感じ？MSよく頑張ったじゃん！> MSはブラウザ作るのを自粛するべき。

[Kiikurage]

知らなかった。background-imageに詰め込むかflex-boxとoverflowで頑張ってた。

[securecat]

まーたEdge未対応問題か

[Mint0A0yama]

バックエンド厨なので、ブラウザ依存あってユーザ毎に毎回処理が走るなら、（プロキシ）配信するときに画像変換 + キャッシュしてあげた方が健全なのでは…と思ったりする。実際うちの本番ではそうしてる。

[megazalrock]

ブコメでEdgeキレるのは流石に御門違いでしょ。Web屋ならW3Cの勧告プロセスぐらい知ってどうぞ。／毎度現在のステータスを書かないこの類のサイトもいい加減にして欲しい。

[tonchix]

MSが対応しないのはCRだからでRECまでいくと対応早いらしい。

[joltkun]

“object-fit: cover;”

[netbusinessjouhou]

画像トリミング

[sachiko-kame]

画像をいい感じに

[azumakuniyuki]

画像を物理加工して縦横比を調整するのが面倒くさいと思って調べたら見つけた

[y_yamanashi]

“object-fit: cover;”

[hopekuson]

便利な時代になったもんやで…

[kathew]

画像の縦横に関するあらゆるニーズに応えてくれる。IE用のポリフィルもある。完璧か

[kanno_kanno]

object-fitなんてあったのか

[idr_zz]

嗚呼object-fitよ。外接リサイズcoverが素晴らしすぎる！！ 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー｜Webクリエイターボックス @webcreatorboxさんから

[baba40]

“object-fit: cover;”

[yasu-log]

［B!］1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

[htn_50koma]

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが

[tailtame]

余白追加できるのか。切り抜きたくないときにいいな。IEはやめさせるように誘導するから…

[shinagaki]

なんで背景画像でできてたのに、普通の画像でもっと早くからできなかったんだろうな

[tomemo508]

日本だと IE・Edge でシェア約３割か。 https://webrage.jp/techblog/pc_browser_share/

[sho_yamane]

またマイクロソフトかよー！！

[abiruy]

backgroundでも似たようなことができるのでよく使ってる。edge対応されたらこれに変えてもいいけど。

[ftmaccho]

マジか！

[miruto]

新しい便利なプロパティを知る度にブラウザの対応状況に絶望する日々を終わらせたい(´･∀･`)

[mad_scientist1]

急速に場を収束させるIEの圧倒的存在感に感服

[yoshi-na]

EdgeはIE兄さんリスペクトしなくていいんだぜ？

[adsty]

画像の縦横比を保ちつつトリミングする方法。

[b4takashi]

これはお手軽で便利！と思ったらIEとEdgeに対応するために外部ファイル読み込みという面倒な手順が待っていたのでMSは滅ぼさねばならない

[sumithsonian]

さらにレスポンシブでも縦横比を維持するCSSを編み出しているのだが、いつか公開してみたい。（編み出したといっても既出CSSの組み合わせやけど）

[awajiisland]

またしてもあやつのせいで余計な作業が、、(´・д・｀)

[ddt2000]

“object-fit”