CSSで画像サイズに囚われずに、サムネイル画像を同じサイズで一覧表示する方法。
大きさの異なる画像を、任意のサイズの正方形に切り取り(overflow:hiddenを使用して)一覧表示します。
1.表示する画像を用意します。
2.HTML
1 2 3 4 5 6 7 8 9 10 11 |
<article class="clearfix"> <span class="cut"><img src="images/img1.jpg" alt="image1" class="cut_image" /></span> <span class="cut"><img src="images/img2.jpg" alt="image2" class="cut_image" /></span> <span class="cut"><img src="images/img3.jpg" alt="image3" class="cut_image" /></span> <span class="cut"><img src="images/img4.jpg" alt="image4" class="cut_image" /></span> <span class="cut"><img src="images/img5.jpg" alt="image5" class="cut_image" /></span> <span class="cut"><img src="images/img6.jpg" alt="image6" class="cut_image" /></span> <span class="cut"><img src="images/img7.jpg" alt="image7" class="cut_image" /></span> <span class="cut"><img src="images/img8.jpg" alt="image8" class="cut_image" /></span> <span class="cut"><img src="images/img9.jpg" alt="image9" class="cut_image" /></span> </article> |
・表示させたい画像サイズを指定するために<span></span>の中に画像を配置します。
・<span>と<img>には、別々のclassを指定しておきます。
3.CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.cut { position: relative; float: left; overflow: hidden; /*不要部分の切り取り*/ height: 100px; /*正方形にしたい高さサイズ*/ width: 100px; /*正方形にしたい横幅サイズ*/ display: block; /*spanなのでblock要素にする*/ margin:0 10px 10px 0; border: 8px solid #ccc; } .cut_image { /*縦・横の画像でも一応見れるように微妙に調整されています。*/ diaplay: block; height: 150px; position: absolute; left: -50px; top: -20px; } |
.cutはブロック要素にしてからサイズを指定し、はみ出す部分はoverflow:hiddenで非表示にします。
.cut_imageは、widthとheight:150pxにし、position:absolute;を指定して上で、絶対位置左に-50px、上に-20pxを指定しています。