How To Arrange Images 3x3?
I have nine images and if I have to arrange them 3x3,which means 3 rows and 3 columns. What would be the best way of doing it? Should I be using CSS?
Solution 1:
3x3 Grid of images
This css allows you to:
- centers images vertically
- centers images horizontally
- allows images of various sizes
- smaller than the grid size images keep original size, to not have the blurred images
- bigger images get resized to the desidered value
- that can simply be changed in the 3th part of the css with setting the
max-width
&max-height
- and obiovsly it keeps the aspect ratio
This is achieved using float-left
& the line-height
trick;
HTML
<divclass="grid3x3"><div><imgsrc="http://placekitten.com/200/300"></div><div><imgsrc="http://placekitten.com/240/300"></div><div><imgsrc="http://placekitten.com/400/300"></div><div><imgsrc="http://placekitten.com/280/300"></div><div><imgsrc="http://placekitten.com/210/140"></div><div><imgsrc="http://placekitten.com/240/200"></div><div><imgsrc="http://placekitten.com/100/300"></div><div><imgsrc="http://placekitten.com/200/100"></div><div><imgsrc="http://placekitten.com/700/300"></div></div>
CSS
.grid3x3{
width:300px;
height:300px;
clear:both;
}
.grid3x3>div{
width:100px;
height:100px;
float:left;
line-height:100px;
text-align:center;
}
.grid3x3>div>img{
display:inline-block;
vertical-align:middle;
max-width:80%;
max-height:80%;
}
DEMO
extra styling..
and javascript click handler
Solution 2:
using ul li
<ul><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li><li><ahref=""><imgsrc="image.jpg"/></a></li>
</ul
Solution 3:
Your HTML -
<div><divclass="row1"><imgsrc="" /></div><divclass="row1"><imgsrc="" /></div><divclass="row1"><imgsrc="" /></div></div><div><divclass="row2"><imgsrc="" /></div><divclass="row2"><imgsrc="" /></div><divclass="row2"><imgsrc="" /></div></div><div><divclass="row3"><imgsrc="" /></div><divclass="row3"><imgsrc="" /></div><divclass="row3"><imgsrc="" /></div></div>
Your CSS -
.row1,row2,row3
{
display: inline-block;
}
Solution 4:
You can use sprite sheet. That will arrange in a regular grid. Sass will do this easily or you can use css.
Solution 5:
<divclass="row3"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></div>
css
<style>.row3img {
width:33%;
height:33%;
float:left;
display:inline-block;
border:solid 1px red;
}
</style>
Post a Comment for "How To Arrange Images 3x3?"