CSSだけで画像をトリミング(切り抜き)する方法

画像を加工しなくても、CSSだけでトリミング(切り抜き)できる

CSSの「clip」プロパティを使うと、指定の要素を好きなサイズにトリミング(切り抜き)できます。切り抜きの形は四角形だけですが、任意の部分を自由に切り抜くことができます。

img要素に対してclipプロパティを使えば、画像を直接加工することなく、手軽に画像をトリミングできます。画像の周囲に余計な部分がある場合や、画像の中の特定の箇所だけを見せたい場合などに便利でしょう。

画像の一部分だけを再度掲載したい場合にも便利

特に、画像内の「特定の箇所」だけを再掲載したい場合、画像ファイルを複数用意しなくても済む点が便利です。

例えば、下図のサンプルページには、「キーボードの写真」の下に、「特殊キー部分だけの写真」と「エンターキー部分だけの写真」の計3枚が掲載されています。しかし、このページ内で実際に読み込まれている画像ファイルは、最初の1枚だけです。残りの2枚は、1枚目の画像をCSSでトリミング(切り抜き)して表示しています。


この方法だと、画像を複数用意しなくて良いので、画像加工の手間が省ける上に、ページの読み込み待ち時間が短くなるメリットもあります。

CSSの「clipプロパティ」でトリミング(切り抜き)ができる

上記のような「画像のトリミング(切り抜き)」処理が、CSSだけで実現できます。主に利用するのは「clipプロパティ」ですが、他にもいくつかのプロパティを併用する必要があります。

今回は、この「clipプロパティ」を使って、画像を直接加工することなく、任意の箇所を切り抜いて表示する方法をご紹介致します。

※本記事では画像を対象にして解説していますが、clipプロパティ自体は「画像以外の要素」に対しても使えます。

それではまずは、clipプロパティの記述方法から見ていきましょう。