Writer:Asai (20.10.13)

cssのプロパティの1つである「object-fit」を利用することで、画像を簡単にトリミングすることができます。この手法はCMSを利用したブログのサムネイルなどにも活用できると思います。
object-fit:cover;の設定

まずは、下記のデモを確認してください。こちらはサンプル画像をもとに、左側にobject-fit設定無、右側がobject-fit設定有を行ったモノです。
確認してもらうとわかるように、左側の写真は縦につぶれたように表示されているのに対し、右側の写真は中央でトリミングされています。このように、object-fit:cover;を利用することで、簡単にトリミングを実行することができます。
object-fitの値
object-fitには下記のような値が存在しています。詳細については、下記のページを参考にしてください。
IEに対応する
object-fitは非常に便利なCSSプロパティですが、IEには対応していないため、そのまま利用するとObject-fitが適用されずに表示されています。そのため、外部jsを利用して、IEでの表示対応を行う必要があります。
object-fitを適用させるjsは2つあるので、Webサイトに他に利用しているjsとの相性を考えて選択してください。
object-fit-imagesの利用
1.object-fitの読み込み
下記のコードを記述して、object-fitを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>
2.スクリプトの実行
スクリプトを実行するための記述を追加します。
<script>objectFitImages();</script>
3.CSSの記述
object-fitが記述されている箇所に、「font-family:'object-fit: 属性値;';」を記述します。
object-fit: cover;
font-family: 'object-fit: cover;';
以上で設定が完了です。これで、IEでもobject-fitが適用された形で表示されます。
fitie.jsの利用
1.ダウンロードして読み込み
下記のリンクからfitie.jsをダウンロードします。
2.fitie.jsの読み込み
ダウンロードしたファイルからfitie.jsを取り出し、リンクします。
<script src="fitie.js"></script>
以上で設定が完了です。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。