画像を任意のところで切り抜きトリミングしてくれるプロパティ『clip 』について

2013.03.03 Category:CSS Tag:CSS

前回、【CSS】『clip 』プロパティを使ってイメージ（画像）を素敵に魅せるチュートリアル　という記事を書いたのですが、紹介させていただいたサイトにCLIPプロパティについても詳細にかかれていたので、まとめてみました。

CSSのCLIPプロパティを理解する

以下は、CSS2.1の仕様です。

Value: <shape> | auto | inherit Initial: auto Applies to: absolutely positioned elements Inherited: no Percentages: N/A Media: visual auto The element does not clip.
11.1.2 Clipping: the 'clip' property ： CSS 2.1

CLIPプロパティがもてる値

clip: rect()//shape値
clip: auto
clip: inherit

clip: rect()//shape値

clip: auto

clip: inherit

上記の3つを持つことが出来ます。 CSS 2.1での、唯一有効な＜shape＞値は、　rect()のみ　です。

CLIPプロパティにautoを指定すると、要素はクリップしません。

そして、もうひとつ大事なことは、Applies to:にあるように、絶対位置のエレメントであること。これは、 position: absolute でなければいけないということ。

では、その唯一の＜shape＞値rectの使い方です。

THE RECT() FUNCTION

clip: rect(<top>, <right>, <bottom>, <left>);

1	clip: rect(<top>, <right>, <bottom>, <left>);

＜top＞と＜bottom＞はボックスの上部の境界エッジからのオフセットを指定し、＜right＞、と＜left＞はボックスの左の境界線の端からのオフセットを指定します。

11.1.2 Clipping: the 'clip' propertyの図

Percentages:　パーセンテージは、N/Aなので使えません。

そして、それらの値は、カンマを使って区切っていきます。

このそれぞれの値には、autoと負の値を指定することが出来ます。

RECT()のautoについて

The value 'auto' means that a given edge of the clipping region will be the same as the edge of the element's generated border box (ie, 'auto' means the same as '0' for and , the same as the used value of the height plus the sum of vertical padding and border widths for , and the same as the used value of the width plus the sum of the horizontal padding and border widths for , such that four 'auto' values result in the clipping region being the same as the element's border box).

要素の生成された境界ボックスの辺と同じになることを意味するから'auto'は '0'と同じ意味です。というようなことが書かれています。

これは、width:100px, height: 100pxをフルサイズで表示したい場合、

rect(0, 100px, 100px, 0)

//または

rect(0, auto, auto, 0)

rect(0, 100px, 100px, 0)

//または

rect(0, auto, auto, 0)

と、上記のように記載することが出来ます。

サポートブラウザ

参考：　Browser compatibility｜MDN

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari (WebKit)
Support	1.0	1.0(1.0)	4.0(カンマなし) 8.0(カンマあり)	7.0	1.0(85)

上記でカンマで区切って記載すると書きましたが、IE7以下については、カンマなしでないと動作しません。

ですので、IE7以下を対象とする場合は、以下のように記載します。

.clip-element {
    position: absolute;
    clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}

.clip-element {

position: absolute;

clip: rect(10px 350px 170px 0); /* IE4 to IE7 */

clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */

}

CSSのCLIPプロパティを使ってみる

デモを作ってみました。

対応ブラウザ Google Chrome / Safari / Firefox / Opera/ InternetExplorer

DEMO

デモのコード

画像のサイズは、300px × 225px です。

/* HTML */

<div id="Demo">
<p class="clipSample">
<a href="#">
<img src="image.jpg" width="300" height="225" alt="サンプル画像" />
</a></p>
</div>

</a></p>

</div>

/* CSS */

body#Demo {
	margin:20px auto 0 auto;
	width:300px;
	text-align:left;
	}

p.clipSample {
	position: relative;
	top: 0;
	left: 100px;
	}

p.clipSample a img {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(50px 205px 155px 80px);
	clip: rect(50px, 205px, 155px, 80px);
	}

p.clipSample a:hover {
	border: none;
	}

p.clipSample a:hover img {
	clip: rect(0 300px 225px 0);
	clip: rect(0, 300px, 225px, 0);
	}