clip プロパティで画像をトリミング

暮らしカテゴリーの変更を依頼記事元:

69users がブックマークコメント

clip プロパティで画像をトリミング

phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」という... phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×

t-murachi rect() 切り出し位置のみをクリッピング表示する。rect() で指定した矩形の表示位置が 0, 0 相当の位置に来るわけではないので、期待する表示位置に来るよう left, top を指定する工夫が必要。

2009/12/22 リンク