clip: rect(***);

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

clip は、要素の切り抜き領域を指定するプロパティです。

  • この指定は、positionプロパティabsolute または fixed を指定している場合に有効です。

このプロパティをimg要素に対して設定すると、画像を切り抜くことができます。


img {
position: absolute;
clip: rect(50px 500px 300px 100px);
}

プロパティ名 説明
clip rect(上 右 下 左) 各辺までの距離を数値+単位(px 等)で指定

初期値は auto(切り抜かない)です。

値の指定方法

rect( )( ) 内に、上、右、下、左の順で4つの値を指定します。それぞれの値は半角スペースで区切って記述します。

  • CSS 2.1の仕様に従う場合は、半角スペースではなくカンマ( , )で区切る必要があります。(ただし、カンマ区切りはIEでは対応していません)

領域の指定方法

表示される領域を、画像(実際の領域)の上端と左端からの距離で指定します。

[領域指定のイメージ]

rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離)
  • 上辺の距離 … 画像の上端から上辺までの距離を指定
  • 右辺の距離 … 画像の左端から右辺までの距離を指定
  • 下辺の距離 … 画像の上端から下辺までの距離を指定
  • 左辺の距離 … 画像の左端から左辺までの距離を指定

例えば次のように指定されている場合は、表示される領域の大きさは 400px×250px になります。

rect(50px 500px 300px 100px)

[領域指定のイメージ]


また、次のように auto(切り抜かない)を指定することもできます。

rect(50px auto auto 100px)

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p.example {
height: 300px;
margin-bottom: 1em;
position: relative;
}

p.example img {
position: absolute;
clip: rect(50px 250px 190px 40px);
}

</style>

</head>
<body>

<p class="example"><img src="tama.jpg" alt="[写真]" width="300" height="225"></p>

</body>
</html>

表示例

[写真]

  • 以下の写真が元の大きさになります。

[写真]