HTML/CSS

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

FUNA
こんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

  • object-fit の基本の使い方が知りたい
  • object-fit で画像の画像をトリミングしたい

 

今回はCSSの「object-fit」についてどのような時に使うのか、その使い方や応用の仕方について解説します。

 

 

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ!

※上記は当サイトからの登録が多い順になっています
※上記以外のエージェントを知りたい方はIT業界エージェント・転職サイトのおすすめをご覧ください。

 

object-fitの基本

「object-fit」プロパティは、<img>タグや<video>タグなどの中身を、どのようにはめ込むかの設定をすることができます。

この「object-fit」プロパティでは以下の値が使用できます。

  • object-fit: fill;
  • object-fit: contain;
  • object-fit: cover;
  • object-fit: none;
  • object-fit: scale-down;

 

object-fit: fill; とは

「fill」を設定すると要素のボックス全体を埋めるサイズになります。

オブジェクト全体が完全にボックスの中を埋めるので、オブジェクトとボックスのアスペクト比が合わない場合は、オブジェクトが合うように引き伸ばされます。

 

object-fit: contain; とは

「contain」を設定するとアスペクト比を維持したまま、要素のボックスに収まるように拡大縮小されます。

オブジェクト全体がアスペクト比を維持したままボックス内に表示されて、オブジェクトとボックスのアスペクト比が合わない場合はレターボックス表示されます。

 

object-fit: cover; とは

「cover」を設定することでアスペクト比を維持したまま、要素のボックス全体を埋めるように拡大縮小されます。

オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合、オブジェクトがボックスに合うように切り取られます。

 

object-fit: none; とは

「none」を設定すると、オブジェクトは拡大も縮小もされません

 

object-fit: scale-down; とは

「scale-down」を設定した場合、コンテンツは「none」又は「contain」を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

 

画像を中央の位置でトリミングする方法

<img>要素に「object-fit: cover;」を指定するだけで、簡単に画像を中央の位置でトリミングすることができます。

See the Pen css object-fit-1 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA
画像サイズは縦横のうち小さい方を基準に、自動で拡大・縮小されて、ボックスからはみ出した部分はトリミングされます。

 

画像を任意の位置でトリミングする方法

上記の方法では画像の基点を中央にしか設定できませんでしたが、それ以外の任意の位置を基点にすることも可能です。

方法としては、object-fitはcoverのままで「object-position」を設定します。

See the Pen css object-fit 2 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA
「object-position」は%での指定ができるので、自由自在に好きな位置に設定できますね。

 

トリミングせずに余白を表示する方法

「object-fit」では画像をトリミングせずに余白を表示する方法もあります。

先ほどは「object-fit: cover;」を使いましたが、余白を表示するには「object-fit: contain;」に変えるだけで実装可能です。

See the Pen css object-fit 3 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA
ここではわかりやすく背景色を追加していますが、画像の幅か高さの大きい方にサイズを合わせて比率を保持して画像を表示しているのがわかりますね。

 

【注意】Internet Explorerには非対応

画像のトリミングをするのに簡単に利用できる「object-fit」ですが、残念ながらIE(Internet Explorer)には対応していません

 

FUNA
もちろんIEに対応しないといけない場合にも、対策はありますのでご紹介します!

 

「object-fit」をIEに対応させる2つの方法

「object-fit」をIEに対応させる方法は以下の2つの方法があります。

 

方法①「object-fit-images」を使う方法

 

まずはGitHubで公開されている「object-fit-images」をダウンロードしましょう。

IE対応のためにダウンロードするのは面倒という方はCDNでも対応可能ですので、ダウンロードせずに次の手順へ進んでください。

 

FUNA
HTMLファイル内でのscriptの記述場所は諸説ありますが、本来はそのプロジェクトやスクリプトの用途に合わせて使い分けるべきです。

/* srcのURL指定はソースの保存先を指定してください。 */
<scrpt src="js/ofi.min.js"></script>
/* CDNの読み込み */
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

 

では読みんだスクリプトを実行します。

/* スクリプトの実行 */
<script> objectFitImages(); </script>

 

object-fit: cover;
/*IE対策用CSS*/
font-family: 'object-fit: cover;';

 

これで「object-fit」をIE対応させることができます。

では次にさらに簡単な方法をご紹介します。

 

方法②「fitie.js」を使う方法

 

/* object-fitのIE対応用JS読み込み */
<script src="fitie.js"></script>

 

たったのこれだけで対応完了です。

FUNA
もしIE対応が必要だけど「object-fit」を使いたい場合には、これらの方法を使っていくと良いでしょう。

関連記事

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNAこんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。


最近の投稿

Copyright© FUNA BLOG , 2024 All Rights Reserved.