最新のInternet Explorerでご覧ください。

お使いのInternet Explorerは古いバージョンのため、このウェブサイトを正しく表示することができません。
マイクロソフトのホームページ で最新バージョン(無料)を入手してください。※IE10以上推奨

Windows XPをお使いの場合は、最新のFirefox(無料)を mozilla社ホームページ よりダウンロードしてご利用ください。

CSSだけで画像をトリミングできるobject-fitプロパティ

2019.05.30

CATEGORY / コーディング

画像のサイズを統一するには、Photoshopなどでリサイズする方法が一般的ですが、CSSを使って画像をトリミングし、サイズを統一する方法もあります。

使うのは「object-fit」プロパティ。一行追加するだけなので非常に簡単です。

左の画像を右のようにトリミング

CSSを以下のように設定します。

3行目の「object-fit」がポイントです。
実際にやってみます。

See the Pen
object-fit
by Show Design Lab (@ShowDesignLab)
on CodePen.

 

トリミングせずに余白を表示させる

前述のようにトリミングをせずに、決められたサイズの中に画像をフィットさせて余白を表示させることも可能です。
その場合は、以下のようにCSSを設定します。

実際にやってみるとこんな感じです。

See the Pen
object-fit 2
by Show Design Lab (@ShowDesignLab)
on CodePen.

わかりやすいように、背景を黒にしています。

 

IE/Edgeに対応させる

とても便利で簡単な「object-fit」ですが、ひとつ問題があります。
それは、IEとEdgeがこのプロパティに対応していないこと。

様々な方法があるようですが、今回は「object-fit-images」を使った対応方法を紹介します。

まずはGithubから「object-fit-images」をダウンロードし、「dist」フォルダー内にある「ofi.min.js」を利用します。ファイルを保存したらHTMLで読み込みます。

IE/Edge以外のブラウザに対応させるため、CSSで「object-fit」の記述をします。さらにIE/Edgeに対応させるための特別スタイルとして「font-family: ‘object-fit: contain;’」を付け足します。

最後にHTMLのの前にスクリプトを呼び出すコードを追加すれば完了です。

まったくMicrosoftのブラウザは、やれやれ、、、ですね。

TAG / , ,

戻 る