Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2019.06.09

CSSプロパティのobject-fitで画像をトリミングさせて配置する

Tags: ,,

アーカイブページのサムネイルなど、複数の画像を同じサイズやアスペクト比で表示させたいことがあるかと思いますが、今回はそんな時に便利な「object-fit」というCSSプロパティの使用例を見ていきたいと思います。

 

画像を任意のサイズでトリミングできる「object-fit」プロパティ

このプロパティは特定のサイズに合わせて画像や動画などをどのように表示させるかを指定することができます。イメージとしてはbackground-sizeに近いような感じです。使い方も簡単でimgタグやvideoタグに対して、プロパティを指定するだけです。ただし、基準となるwidthとheightを指定する必要があります。必要に合わせて「object-position」プロパティを使うことでトリミングの基準位置を調整することも可能です。

// HTML
<img class="clipping-image" src="../example.jpg">

// CSS
.clipping-image {
 width: 280px;
 height: 280px;
 object-fit: cover;
 object-position: 50% 50%;
}

 

object-fitプロパティに使える値には下記のものがあります。表示させたい要件に合わせて使い分けていきます。

 

fill 指定のサイズを埋めるように表示されます。トリミングはされず、画像の縦横サイズのアスペクト比を無視します。アスペクト比が変わる場合は画像が歪みます。
contain 指定サイズに縦横のサイズの大きい方が合うようにリサイズして表示されます。トリミングはされずに画像全体を表示しますがアスペクト比が変わる場合は上下もしくは左右にスペースができます。
cover 指定サイズに縦横のサイズの小さい方が合うようにトリミングされて表示します。画像全体は表示されずに原寸もしくは拡大されて表示されます。
none 指定サイズとは関係なく画像の原寸サイズで表示され、指定サイズより大きい場合はトリミングされます。
scale-down 画像が指定のサイズより大きい場合にはcontainを、指定サイズより小さい場合にはnoneが適用されます。

 

また、デフォルトは中央を基準にトリミングされますが、「object-position」の値を変更することでトリミング位置を調整することができます。下記のようにx軸とy軸の座標を指定するだけで大丈夫です。

object-position: [x軸の起点] [y軸の起点];

object-position: 0% 0%; // 左上を基準にトリミング
object-position: 50% 50%; // 中央を基準にトリミング
object-position: 100% 100%; // 右下を基準にトリミング

 

backgroundプロパティや、positionプロパティを駆使すれば近いものになるようできますが、このプロパティではimgタグだけでなくvideoタグにも適用できるので簡単に動画のトリミングも実現可能です。実際のサンプルはこちらに用意しましたので参考にどうぞ。

 

ちなみにですが、このobject-fitのプロパティはIEでは対応していないので注意が必要です。またOperaの場合はベンダープレフィックスが必要になります。

 


 

いかがでしょうか、カードタイプのUIや、メディアサイトのサムネイル、ギャラリーサイトなどにも使えそうですね。特性的にもレスポンシブデザインとの相性も良いですね。簡単に画像のトリミングができるのでぜひ試してみてはいかがでしょうか。

 

(参考にさせて頂いたサイト)
object-fit – CSS: カスケーディングスタイルシート | MDN

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?