Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Constraining image height with bootstrap responsive image?

Working on a site using bootstrap, in the portfolio section, the images of projects are responsive with :

'class' => 'img-responsive' 

It works great for landscape images, the portrait images are blown up to fit width wise, but are too tall, is there a way to check for a portrait orientated image and just apply a fixed height of 600px for it?

like image 611
Adam Tracksler Avatar asked Oct 31 '13 14:10

Adam Tracksler


1 Answers

If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg

.container { height: 600px; }   /*And then change */   .container .img-responsive {     display: block;     height: auto;     max-width: 100%; }   /*To */  .container  .img-responsive {     display: block;     width: auto;     max-height: 100%; } 

Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter

like image 198
MrPeeps Avatar answered Sep 20 '22 19:09

MrPeeps