Limita la larghezza dell'immagine con orientamento verticale/preserva le proporzioni

Question

Ho impostato flexslider su un sito reattivo. Il dispositivo di scorrimento che sto creando utilizza sia le immagini con orientamento orizzontale che verticale. Ho impostato smoothHeight: true in modo che l'altezza si adatti alle immagini.

Alla query multimediale più grande il contenitore flexslider è largo 750 px. Questo va bene per le immagini con orientamento orizzontale, ma le immagini con orientamento verticale diventano troppo grandi. La larghezza dell'immagine verticale viene impostata con le stesse dimensioni del contenitore: 750 px di larghezza, quindi l'altezza è almeno il doppio e quindi non è possibile visualizzare l'intera immagine senza scorrere.

Nel css ho provato a impostare max-height: 750px che risolve il problema di altezza ma flexslider quindi allunga l'immagine per adattarla a 750 px di larghezza per 750 px di altezza.

Qualcuno sa di come ottenere flexslider per preservare le proporzioni e regolare la larghezza dell'immagine in base allo max-height? In modo che le immagini ritratti siano alte 750px ma mantengano le proporzioni.

Answer 1

Non capisco su quale funzionalità di Flexslider parli - sullo zoom dell'immagine o su quelle in miniatura nella barra degli strumenti a scorrimento? Qualunque cosa, c'è una soluzione per entrambe le situazioni:

<style> 
figure { 
    outline: green solid 1px; 
    padding: 2px; 
} 
img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: relative; 

    outline: red solid 1px; 
    opacity: .5; 
} 
.scale img{ 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    vertical-align: middle; 
} 
.toheight img{ 
    max-width: none; 
} 
</style> 
<figure class="scale toheight" width="200" height="200"> 
    <img src="http://placekitten.com/250/300"/> 
</figure> 

Soluzione immagine coltura o di scala per all'interno del contenitore http://jsfiddle.net/iegik/ZzXru/

questione connessa: How to align cropped element horizontally?

Answer 2

L'immagine dovrebbe mantenere il suo rapporto per impostazione predefinita, a meno che non è stato impostato anche width: 100%;, nel qual caso è necessario modificarlo per utilizzare width: auto, quindi il tuo max-height: 750px avrà il precedente