clipセレクタで画像をクリップする

画像の一部を切り取って、かつその部分をリサイズして表示したい
・・・ということをやりたかったので、初めて使いました

どのブラウザでもちゃんと動きました

コチラのサンプルの「基本形」で行っている指定方法が以下

<div style="position:{absoluteまたはrelative}; {表示位置}; {表示サイズ}; overflow:hidden;">
<img style="position:absolute; display:block; {クリップ左上の位置}; {画像サイズ};
clip:rect({クリップ位置・サイズ});" src="./yourimage.png" />
</div>

切り抜くimgタグ本体と、そのディスプレイとしての親要素の2つで構成されています

{表示位置} = absoluteもしくはrelativeによって表示させたい位置
　　topやleftやその類のセレクタを記述する

{表示サイズ} = 実際の表示サイズ、widthとheightを指定

{クリップ左上の位置} = 画像切り抜き位置の左上座標を指定する、topやleftを指定
　　これは後述する{クリップ位置・サイズ}で指定する左上の位置と同じになる

{画像サイズ} = この例だと yourimage.png の大きさを widthとheightで指定

{クリップ位置・サイズ} = 例えば、100×100画像の最左上から40×60でクリップしたければ
　　clip:rect(0 60px 40px 0); になる、(上 右 下 左) という指定順
　　この点の詳細は clip･････ボックスを切り抜き表示（クリッピング）する を参考にした

というのを基本形にしました
imgタグをインラインのまま扱うサンプルも散見しましたが、扱い難いので止めました
この形なら、自在に切り抜いて配置することができます

ちなみに、「一部を切り取って拡大・縮小」も出来ました
コチラのサンプルの下の例 がそれになります