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

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

[mut00tum]

clip

[kuro14]

CSSのclip解説.

[cosmetick]

clipプロパティとかあったんだー覚えておこう。

[t-murachi]

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

[kanariia]

画像トリミング

[mobile_snk]

CSSだけで画像をトリミングできる

[stock]

CSSトリミング

[ochanoco_naoco]

cssでトリミング

[publichtml]

]http://phpspot.org/blog/archives/2008/02/cssoverflow.htmlのClip版。というか、意味合い的にはこClipを使う方が正かも。

[wakatakahawks]

clipかぁ使ったこと無かった。そういえば前に参考書で見たかも。超忘却。でかいとシステム側で縮小しないとだけど小さい画像なサムネイルいらずだ。

[field_combat]

今のところ使い道は思い浮かばないけど、メモ

[vv_boow_vv]

「CSSの Overflow を応用して画像を綺麗にリサイズ表示する」 という記事が上がっていたのですがこの手のトリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで。