Displaying images with adaptive width and fixed aspect ratio

Question

I'm displaying images in a grid for a photography website using bootstrap.

Bootstrap takes care of displaying all pictures with the same width. However, I need to find a way to limit the height of vertical pictures to that of their horizontal peers.

The result should be that vertical pictures are cropped into horizontal pictures when displayed in the grid.

I'm using this code to display the images:

<div class="col-xs-12 col-sm-4 col-md-3">
   <a href="img/picture-1.jpg" data-lightbox="gallery"><img class="img-responsive" src="img/picture-1.jpg"></a>
</div>

or, alternatively:

<a class="col-xs-12 col-sm-4 col-md-3" href="img/picture-1.jpg" data-lightbox="gallery"><img class="img-responsive" src="img/picture-1.jpg"></a>

I'm tried with fixed width and height pixel value, but to no avail.

I rephrased the question. Hope it's clearer now! Basically I'm looking for a way to display all my images, be they horizontal or vertical, into a thumbnail of fixed (horizontal) aspect ratio. — bsuire, Jul 31 '14 at 23:31
I guess I'm still not understanding exactly. I don't see a question mark in the entire question, so maybe I missed the rephrasing. It would also help if you would create a Fiddle demonstrating the problem, or a sketch. — Kelderic, Aug 01 '14 at 15:44
Well the question is: what can I do so all my images, regardless of size and proportion, are all displayed in the same size and proportions? I'll try to make a Fiddle. — bsuire, Aug 02 '14 at 18:06

score 0 · Answer 1 · answered Aug 02 '14 at 05:53

0

In your CSS, why not do something like this:

.img-responsive {
    height: 30vh;
}

Vertical height vh is usually more definitive than just setting a pixel or %age height.

answered Aug 02 '14 at 05:53

PanicBus

566
1
7
17

thanks but that didn't work. However I found the solution: make a fixed sized container (which I'd tried of course), and use the overflow:hidden property! – bsuire Aug 03 '14 at 12:56

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Found the solution here: CSS Image size, how to fill, not stretch?.

Dominic Green's solution:

<div class="container"><img src="ckk.jpg" /></div>

.container
     {
      width:300px;
     height:200px; 
     display:block; 
     position:relative;
     overflow:hidden;
     }
.container img 
    {
     position:absolute;
     top:0;
     left:0; 
     width:100%;
     }

Its a pain in css to do what you want and center the image, there is a quick fix in jquery such as

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

Displaying images with adaptive width and fixed aspect ratio

2 Answers2

Linked