[CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore

[exFelino]

Buonasera a tutti,
ho una galleria di immagini all'interno di un sito web realizzato in Wordpress.

Allo stato attuale la larghezza è fissa, mentre l'altezza proporzionale alla dimensione dell'immagine che viene visualizzata.

Vorrei evitare che la dimensioni del DIV cambia secondo l'immagine da visualizzare, così vorrei che anche l'altezza fosse fissa, eseguendo magari un crop dell'immagine dove necessario.

Ovviamente il problema si presenta principalmente nel passaggio da un'immagine orizzontale ed una verticale.

Ecco il link ad una pagina in questione.

Grazie.

[Mich_]

Fare un crop automatico non mi sembra una buona idea. Rischi di non visualizzare parti importanti della foto.

Piuttosto farei un blocco quadrato per ciascuna immagine, e poi farei scegliere a chi inserisce l'immagine se vuole lasciarla intera (con spazi bianchi a destra/sinistra oppure in alto/basso), oppure ingrandirla lasciando solo una parte.

Per centrare l'immagine nello spazio quadrato, puoi usare il posizionamento assoluto dell'immagine dentro il blocco posizionato relative, e giocando con top/left 50% (vedi tra i "link utili" il modo di posizionare).
Ricorda che se all'immagine <img> dai una sola dimensione, l'altra dimensione segue senza distorcere.

[exFelino]

Quindi dovrei comunque mettere fissa l'altezza in modo tale da la larghezza variabile, giusto?
Sarebbe il caso di impostare una dimensione al div contenitore utilizzando un
margin: 0px auto
all'immagine in esso contenuto in modo tale da averle centrare.

Cosa ne pensi?

[Mich_]

Non direi.

Lasciando stare quanto ho detto prima riguardo il crop e la preparazione dell'immagine quando la carichi (che sarebbe la soluzione corretta per avere un risultato migliore), e lavorando solo sulla pagina di presentazione, la soluzione potrebbe essere:

Contenitore con altezza fissa e larghezza come la pagina (o come lo spazio disponibile).
Immagine con
display:block;
margin 0 auto;
height: 100%;

[exFelino]

Ho risolto, la pagina in questione è stata realizzata tramite la dll Slick.

Grazie.