前の記事 ≪:2008年2月19日 管理人のブックマーク
次の記事 ≫:ブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR...

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル

2008年02月20日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Create Resizing Thumbnails Using Overflow Property | Css Globe
This tutorial is aimed at controlling the size of the thumbnails appearing on your page.

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。
次のように、CSSで画像を固定サイズにトリミング表示できます。



更にマウスオーバーで画像を元サイズに。


実装について見ていきましょう
マークアップが次のようにあったとします

<p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p>

そして、次のCSSを適用。

p.thumb{
    float:left; 
    margin:.5em 0; 
    margin-right:10px; 
    border:1px solid #999; 
    padding:2px;
}
p.thumb a{ 
    display:block; 
    float:left; 
    width:100px; 
    height:100px; 
    line-height:100px; 
    overflow:hidden; 
    position:relative; 
    z-index:1;
}
p.thumb a img{ 
    float:left; 
    position:absolute; 
    top:-20px; 
    left:-50px;
}

/* mouse over */

p.thumb a:hover{ 
    overflow:visible; 
    z-index:1000; 
    border:none;
}
p.thumb a:hover img{ 
    border:1px solid #999; 
    background:#fff; 
    padding:2px;
}

/* // mouse over */

p.thumb a セレクタによって、width,height のサイズ指定と、overflow:hiddenによってサイズを調節します。
そして、p.thumb a img セレクタで、画像の左上の開始位置を top, left で指定しています。
a:hover によって、画像を元のサイズで表示するようになってます。

大きい画像も、定められた範囲に収めることが可能なので、これは使えるテクニックですね。

関連エントリ

関連の記事検索:CSS, 画像, チュートリアル, Webデザイン, css, overflow
スポンサード リンク

By.KJ : 2008年02月20日 07:23 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)