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>

そして、次のＣＳＳを適用。

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のみでプレーンテキストにクールなグラデーション効果を付けるテクニック
• 1個の画像でシンプルに角丸を実装するCSSサンプル