blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。見では同じレイアウトでも、コーディング方法がいくつかあることって多いですよね。メインビジュアルやサムネイル表示等で画像の見栄えを整えたいとき、私は背景画像やpositionプロパティに頼ることが多かったんですが、そこで出会ったのがこのobject-fitというプロパティです。画像をトリミングできるプロパティだそうで、どうやらこれまでcssで何行も書いていたレイアウトがかなりシンプルに書けそう...ということで、よくあるobject-fitを使って実際に色々と試してみました。試した感想や使い方について書いていきます。シンプル&セマンティックなコーディングができるobject-fitとは?object-fitは、img要素やvideo要素などの置換要素を、ボックスにどのようにはめ込むかを指定する際に使用するプロパティです。img要素やvideo要素そのもののサイズに対して中身の写真や動画の表示方法を指定することで画像のトリミングができます。各設定値ごとの挙動はこちらのサイトが参考になりました。MDNIMG要素のスタイリングの自由度がかなり上がりましたね...background-size感覚で使えそうです。実際に使うシチュエーションを考えてみると、メインビジュアルでアスペクト比と違った見せ方をさせたいときサイズがばらばらの画像をサムネイル一覧として並べたいときここらへんのスタイリングに便利そうだったので、実際にobject-fitで試してみました。object-fitでスタイリングしてみるメインビジュアルの天地中央寄せPCレイアウトのメインビジュアルの見せ方のひとつに、上下左右中央を中心点として、特定の幅(画像サイズ等)以下は画像が左右にコンテンツからはみでて、特定の幅以降は拡大しながら上下にはみでていくというパターンがあると思います。こんな感じの動きをさせたい時どう書くか試してみます。これまでよく使用していたpositionを使った書き方。50%;}Demo※スマホ時はアスペクト比を保持して縮小してます。これを、object-fitを使って書いてみます。top;}Demo包含するdivいらず...だと..(°Д°;)ものすごくシンプルにかけました。サムネイルを横並びにするニュースのサムネイルを横並びで一覧表示させたい時などはよくあると思います。WordPressならサムネイルの画像サイズは統一できますが、サイズがばらばらな画像を並べなくてはいけないというケースもありますよね。これまでの書き方だと以下のようにpositionで書いたりしていました。50%;}Demoobject-fitだとこう書けるようになります。cover;}Demopadding-topを使わないため高さの指定方法は変わりますが、ぱっと見で分かりやすくなった気がします。positionの方は指定のサイズに足りない画像は自動で拡大されますが、大きすぎる画像は指定のサイズに合うよう縮小してくれていません。便利なobject-fitですが、2018/11/27現在、IE未対応・Edge一部未対応という状況です。use便利な分めちゃくちゃ惜しい...(ノД`)と思っていたら、E/Edgeに対応させられるプラグインがありました。object-fit-images3KBの軽いファイルを読み込んでjsとcssに1行ずつ記述するだけ。svgのIE対応レベルでさくっと導入できます。具体的には次の2つの作業を行います。img');</script>読み込んでいるファイルはCDNの例です。ように引数なしで、特定の画像を指定したいなら上記のように引数にセレクタを書くことができます。cover;';/*IE用*/object-fitプロパティの後ろに、font-familyプロパティでobject-fitを書きます。これを書くことで、プラグインがIE/Edgeでもよしなに表示させてくれます。いうことで、先ほどのデモをIE/Edge対応したものがこちら。MVdemoサムネdemo綺麗にIE/Edgeでも表示されるようになりました!よりシンプル&セマンティックなコーディングができる個人的にIMG要素をもっと柔軟にスタイリングできたらいいのに!と感じることが多かったので、object-fitはセマンティックなHTMLマークアップ、シンプルなcssコーディングをする上で非常に強い味方だなぁと感じました。IE/Edge対応用プラグインも他とまとめて結合・圧縮すれば、ほとんど負荷はかからなそうなので、是非積極的に使っていきたい...!以上、「object-fitを使って簡単にサムネ表示やメインビジュアルをスタイリングする」でした。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。