【CSS】CSSだけで画像を任意の場所をトリミングできる「object-view-box」が便利すぎた。

## はじめに
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6a821a8f-de43-c59c-efdb-0e2563756f00.png)
みなさんは、CSSで画像をトリミングする時どんな方法を使いますか？

`object-fit`を使ったり、
`background-size`と`background-position`を使ったりという方法は有名かなと思います。

これらの方法は、余計な`div`が生じたり、
トリミングする場所が選べなかったりと不自由な部分もあります。

この記事では、画像を任意の場所をトリミングできる「object-view-box」について紹介したいと思います。

## 今までのやり方
今までに、画像をトリミングするには、`object-fit` を使ってやる方法が紹介されていることが多いです。

しかし、`object-fit` は、WidthやHeightのサイズに合わせて、画像の表示サイズを変える方法のため
特定の場所のトリミングすることはできません。

画像の任意の場所をトリミングするために、今までは以下の方法でやっていたと思います。

+ **要素を追加してWrapする方法**
+ **背景画像として配置する方法**

これらの方法について解説していきます。

### 要素を追加してWrapする方法
この方法は、

+ `divタグ` や `figureタグ` でWrapする。
+ Wrapしている要素に `position: relative` と `overflow: hidden` を設定する。
+ 画像に`position: absolute`を設定し、位置とサイズの値を調整する。

このように作成します。

*↓ sample*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxjmMPb" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/xxjmMPb">
  object view box</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 背景画像として配置する方法
この方法は、

+ 要素の背景に画像を設定する。
+ 背景画像のサイズと位置を `background-size` と `background-position` で設定する。

このように作成します。

*↓ sample*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MWGxxbx" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWGxxbx">
  object view box ①</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 「object-view-box」を使った方法
### 「object-view-box」とは？
`object-view-box` は、`<svg viewbox>` と同様に、要素上のビューボックスを指定し、
要素を拡大したり、表示する場所をずらしたりすることができるプロパティです。

また `object-view-box`は、`inset`（上、右、下、左）の値を指定することで、
任意の場所をトリミングすることができます。

*例：↓このようにトリミングする場合*
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7a3272f1-c2fc-51fd-6df0-e9e388aa6f9d.png)

```sample.css
.image {
  object-view-box: inset(80px 180px 30px 20px);
}
```

### sample

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBYvvej" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/qBYvvej">
  object view box ②</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ
この記事では、CSSだけで画像を任意の場所をトリミングできる「object-view-box」について解説しました。

今まで、画像をトリミングする方法は、
余計な`div`が生じたり、トリミングする場所が選べなかったりと
セマンティックとして正しくできませんでした。

object-view-boxを使った方法では、余計な`div`が生じたりなどもせず、
セマンティックとしての正しさを担保できる方法です。

また、画像だけでなく、他の要素を四角形にトリミングするためにも使えるため、
覚えておきたいプロパティの1つですね！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510