2013-10-31 8 views
30

Lavorare su un sito utilizzando bootstrap, nella sezione portafoglio, le immagini dei progetti sono reattiva con:Limitazione dell'altezza dell'immagine con l'immagine reattiva di bootstrap?

'class' => 'img-responsive' 

E le grandi opere per le immagini di paesaggio, le immagini ritratto vengono fatte saltare per adattarsi larghezza saggio, ma sono troppo alto, c'è un modo per controllare un'immagine orientata in verticale e basta applicare un'altezza fissa di 600 px per questo?

+0

altezza massima: 600px; – ediblecode

risposta

37

Se il contenitore deve avere un'altezza fissa, poi dare un ID (o di una classe) e modificare le restrizioni .img-reattiva viceversa esempio

.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%; 
} 

Non so come andrà a lavorare con un mix di orientamenti ma se sono floated non dovrebbe importare davvero

+2

Questo ha funzionato per me. Penso che questo dovrebbe essere contrassegnato come la risposta. Kudos @MrPeeps. –