I have a problem.
http://img831.imageshack.us/img831/2111/18435469.png
Here you can see that one image does not fit into container. It would be easy to do if the width, height would be fixed but this layout is flexible and the image height+width changes when you resize browser window.
Maybe there is an easy way to do it with Javascript?
CSS:
.photo:nth-child(4n+1) {
background:#ff0000;
max-width:100%;
margin: 0;
clear: both;
}
.photo:nth-child(4n+2) {
background:#EEE;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}
.photo:nth-child(4n+3) {
background:#AAA;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}
.photo:nth-child(4n+4) {
background:#CCC;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}
.photo:nth-child(4n+1) img {
width: 100%;
}
.photo:nth-child(4n+2) img {
max-width: 100%;
max-height: 100%;
}
.photo:nth-child(4n+3) img {
max-width: 100%;
max-height: 100%;
}
.photo:nth-child(4n+4) img {
max-width: 100%;
max-height: 100%;
}
THE PHP code:
<div class="photo">
<img class="group2" href="uploads/'.$row[2].'" src="uploads/'.$row[2].'"/>
</div>