2017年10月5日

デザイン

CSSのobject-fitだけで画像を簡単にトリミングする便利な方法

目次

  1. はじめに
  2. よくある問題
  3. object-fit
  4. まとめ

はじめに

今回はブログやメディアなど、縦横比が違う画像を多用するサイトでよく起こる問題を解決する方法をご紹介します!

本記事のタイトルは「CSSだけで画像をトリミングする方法」ではありますが、厳密にいうと、画像を「トリミング」する、というよりもCSSを使い、決められた幅と高さの枠の中に用意された画像を表示する、という表現の方が正しいかもしれません。

ご自身のブログやメディアの画像が決まらなくて困っている方は、ぜひご活用ください!

今回の解決法

今回はCSSの obejct-fit プロパティを使って、CSS1行で画像をトリミングしていきます!

とにかく、今回大事なのは、object-fit: cover;こちらです!

こちらをトリミングしたい画像にかけることで、1行のCSSだけで簡単に画像をトリミングできる便利な方法になってくれるのです!

では、少し問題とその解決法を深堀していきます。

よくある問題

まずは、今回の問題を整理していきます。

例えば、ブログの記事のリストを作るときにサムネールを入れたりします。

こんな感じ:

もしくはこんな感じ:

よくあるデザインですし、実際にデザインを起こしてみたときも良さそうな感じです!

よし、コーディングを始めるぞ!と意気揚々とカタカタしていると1つ問題に気づきます…。

全てバラバラの縦横比の画像を入れると…このデザイン崩れない?

例えば、横幅に合わせると..。

なくはないけど、元のデザインと比べると残念すぎる:

これもないわ…:

逆に高さに合わせると…

もう悲しい….:

これ以上私を苦しめないでくれ…:

じゃあ、もうガチガチに widthheight を固めてしまおう!

とすると…

当たり前だけど縦横比崩れた…終わった…:

というデザイナーを今まで散々苦しめてきた問題を、さっぱり解決していきたいと思います!

object-fit

今回、ご紹介するのは、CSSの obejct-fit プロパティです。

object-fit プロパティを使用すると、要素の高さと幅にどのように画像やビデオが埋め込められるかを定義することができます。

object-fit の値

  • fill(デフォルト値)縦横比を保つことなく、画像を要素いっぱいに広げる
  • contain縦横比を保ったまま、画像が要素の中に入るように、画像を大きさを変更する
  • cover 縦横比を保ったまま、画像が要素の中いっぱいになるように広げ、余った部分はトリミングする
  • none 要素の高さと幅を無視し、画像の元の大きさになる
  • scale-down, object-fit: none;object-fit: contain; を比べ、画像が小さい方が表示される

こちら、デモを作ってみました。
コードの中身とか細かいところをみたい方は参考にしていただければと思います。

See the Pen veGrZJ by Ayaka Sasaki (@ayausaspirit) on CodePen.

では、それぞれ見て行きます。

fill


デフォルトの設定です、そんなに悪くはないのですが、文字の部分とかは縦横比が気になります。

contain

object-fit: contain; の結果です。
縦横比は崩れていないので良いのですが、ちょっと空白があり、寂しい気もする…。

cover

object-fit: cover; の結果です。
これだー!!!!縦横比も崩れてなく、余白もなく良い感じです!!

通常このような動きを作りたい場合は外側を<div>で囲って、overflow: hidden;などで必要ない部分を隠す、という処理が必要になってきます。
<div>という要素を追加せずにできるのは非常にありがたいですね!!

none

object-fit: none; の結果です。
今回は出番はなさそうです。

scale-down

object-fit: scale-down; の結果です。
contain同様、悪くはないです。画像が極端に小さいものなどがある場合は、こちらの設定でも良いかもしれないです。

サポートブラウザ

ブラウザサポートをcan i useで見てみます。

IEとEdgeではまだサポートがあまり進んでいないようです。

では、実際に object-fit: cover; をサポートが進んでいないブラウザ見てみましょう…。ドキドキ

サポートされている場合:

サポートされていない場合:

縦横比は崩れていますが、画像自体に widthheightをかけているので、レイアウトは崩れていません。

「Progressive Enhancement (プログレッシブエンハンスメント)」の方針の制作であれば、使えそうですね。

CHECK!!

「Progressive Enhancement (プログレッシブエンハンスメント)」とはサポートしていないブラウザにはそれなりのデザインを、逆にサポートしているブラウザを使っているユーザーにはよりリッチなデザインや機能を提供すること

まとめ

以上、CSSだけで画像をトリミングする方法をご紹介しました!
CSSもどんどん新しいプロパティが追加され、現在では500以上のプロパティがあるそうです!全て知っておく必要は全くありませんが、object-fitのように使えそうなものはどんどん取り入れて行きたいですね!
ぜひ、みなさんの参考にしてください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP