webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

object-view-boxを使って画像の好きな場所をトリミングする
この記事を書いている人
Marie

Marie

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

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

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

object-view-boxとは

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

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

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

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

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

inset は CSS のプロパティで、 toprightbottomleft を一括で指定する方法です。

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;
}

どんな時に使う?

紹介しておきながら、どのタイミングで使うと便利なのでしょうか。w

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

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

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

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

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

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

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング 【css】object-view-box を使って画像の好きな場所をトリミングする

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)