0

画像サイズを揃えてサムネイル画像を表示する

サムネイル並びCSS

CSSで画像サイズに囚われずに、サムネイル画像を同じサイズで一覧表示する方法。
大きさの異なる画像を、任意のサイズの正方形に切り取り(overflow:hiddenを使用して)一覧表示します。

 

デモサンプル

1.表示する画像を用意します。

2.HTML

・表示させたい画像サイズを指定するために<span></span>の中に画像を配置します。
・<span>と<img>には、別々のclassを指定しておきます。

3.CSS

 .cutはブロック要素にしてからサイズを指定し、はみ出す部分はoverflow:hiddenで非表示にします。

.cut_imageは、widthとheight:150pxにし、position:absolute;を指定して上で、絶対位置左に-50px、上に-20pxを指定しています。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 画像サイズを揃えてサムネイル画像を表示する