【css】object-view-box を使って画像の好きな場所をトリミングする

この記事を書いている人

Marie

• フリーランスwebデザイナー＆講師
• 制作会社・インハウスデザイナーを経験し独立
• オンラインwebデザイン教室ちいウェブ運営
• 仕事の合間の息抜きに植物を育てています♡
• スプラ・DIY・将棋がすき
• 2人の子育て途中

もっと詳しくみる

画像のトリミングは、background-imageを使ったり、object-fitを使ったり、親につけるoverflow:hiddenを利用したりといくつか方法があります。

今回は、object-view-boxというプロパティが最近新しく追加されたようなので見ていきたいと思います。

• object-view-boxとは
• object-view-boxの使い方
• どんな時に使う？

object-view-boxとは

画像の任意の場所を数字で指定して、トリミングを行うことができるプロパティです。

Crome104にて新規追加されたプロパティです。

例えば次の画像の、この場所をトリミングしたいという場合に、場所を指定してトリミングすることができます。

が画像の端から何pxの位置にあるのかを確認します。

そして、insetにて一括で指定します。

inset は CSS のプロパティで、 top, right, bottom, left を一括で指定する方法です。

marginやpaddingなどでも使用します。

object-view-boxの使い方

img {
  object-view-box: inset(100px 455px 259px 398px);
}

ただ、このままだと、トリミングした画像自体も元画像サイズの大きさを保とうとしていますので、widthで表示させたい幅を入力してください。

img {
  object-view-box: inset(100px 455px 259px 398px);
  width: 300px;
}

どんな時に使う？

例えば集合写真など1つだけアップロードして、それぞれの顔をトリミングするような場合や、お料理とかも考えられますかね？

あとは、ひいている画像と今回のようにアップにした場合と2種類表示させたい時も、1枚の画像で実装可能だということですね。

他にもこんな時便利だよっていうことが分かれば追記してみます＾＾

＊ちなみに、chrome104で新しく追加されたプロパティなので、まだまだ普段使いはできなそうです。

＊現在はSafariも未対応です。

今後便利に使えるようになるのに期待してみます