CSSプロパティのobject-fitで画像をトリミングさせて配置する
最終更新日: Update!!
アーカイブページのサムネイルなど、複数の画像を同じサイズやアスペクト比で表示させたいことがあるかと思いますが、今回はそんな時に便利な「object-fit」というCSSプロパティの使用例を見ていきたいと思います。
また、デフォルトは中央を基準にトリミングされますが、「object-position」の値を変更することでトリミング位置を調整することができます。下記のようにx軸とy軸の座標を指定するだけで大丈夫です。
いかがでしょうか、カードタイプのUIや、メディアサイトのサムネイル、ギャラリーサイトなどにも使えそうですね。特性的にもレスポンシブデザインとの相性も良いですね。簡単に画像のトリミングができるのでぜひ試してみてはいかがでしょうか。 (参考にさせて頂いたサイト) object-fit - CSS: カスケーディングスタイルシート | MDN
画像を任意のサイズでトリミングできる「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: 0% 0%; // 左上を基準にトリミング object-position: 50% 50%; // 中央を基準にトリミング object-position: 100% 100%; // 右下を基準にトリミングbackgroundプロパティや、positionプロパティを駆使すれば近いものになるようできますが、このプロパティではimgタグだけでなくvideoタグにも適用できるので簡単に動画のトリミングも実現可能です。実際のサンプルはこちらに用意しましたので参考にどうぞ。 ちなみにですが、このobject-fitのプロパティはIEでは対応していないので注意が必要です。またOperaの場合はベンダープレフィックスが必要になります。
いかがでしょうか、カードタイプのUIや、メディアサイトのサムネイル、ギャラリーサイトなどにも使えそうですね。特性的にもレスポンシブデザインとの相性も良いですね。簡単に画像のトリミングができるのでぜひ試してみてはいかがでしょうか。 (参考にさせて頂いたサイト) object-fit - CSS: カスケーディングスタイルシート | MDN
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories