画像サイズがバラバラだとデザインが
崩れたりする。また、固定サイズで表示
したいときがある。
前から全ての画像を固定サイズで表示させる
方法を探していたのだが良い方法が見つからなかった。
だが、ついに発見
cssのoverflowを使ってトリミング表示できるそうです。
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
Create Resizing Thumbnails Using Overflow Property | Css Globe
以下引用です。
<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 */
これはかなりいいです。