0

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>

2 Answers 2

0

use following jquery ....

$(document).ready(function(){
var height = $(".photo").height();
var width=$(".photo").width();
$(".group2").attr("height",height );
$(".group2").attr("width",width);
});

This will get the height&width of the and assign to the image. so the image fit with the

Note. Better always use id to get the height and width.

0

This worked for me with css only:

containing div:

.image_holder {
overflow:hide;
}

image:

.image_holder img {
height: 100%;
max-width: 150%;
width: auto;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.