0%

Programmingプログラミングナレッジ

Posted:2019.06.09

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

アーカイブページのサムネイルなど、複数の画像を同じサイズやアスペクト比で表示させたいことがあるかと思いますが、今回はそんな時に便利な「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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】