Question

I’ve made my image gallery responsive with the following code:

<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg" />
</div>

<div class="line2">
<img src="image5.jpg" alt="image5.jpg" />
<img src="image6.jpg" alt="image6.jpg" />
<img src="image7.jpg" alt="image7.jpg" />
<img src="image8.jpg" alt="image8.jpg" />
</div>

.line1 { 
overflow:hidden; 
height:auto; 
}
.line1 img { 
width:25%; 
}
.line2 { 
overflow:hidden; 
height:auto; 
}
.line2 img { 
width:25%; 
}

I’m glad the responsiveness is working because it’s exactly what I want. However, because the images are all different sizes, the outcome is this: http://i50.tinypic.com/2dm9yms.png and I would rather it be like this so that the images can be cropped: http://i46.tinypic.com/mm4xv6.png

What do I need to change in my CSS to get it like that?

Answer 1

If you can give your div a fixed height, it would work. Also, you should not have classes line1 and line2 It should just be line, notice you’re duplicating your CSS

.line {
   height: 80px;
   overflow: hidden
}