Ciao a tutti, vi posto un codice esemplificativo, poi vi dirò quale risultato vorrei raggiungere:

codice:
<div class="contenitore"><img class="immagine" src="XXX.jpg" >
</div>


<style>
.immagine {
    width: 33%;
    height: auto;
}


</style>
Come vedete ho un’immagine con larghezza variabile in percentuale e altezza automatica.

Questo determina che quando la pagina viene ridimensionata, anche l’altezza dell’immagine varia.

Io invece vorrei che l’altezza dell’immagine sia determinata riempiendo tutta l’altezza del div con classe “contenitore” in cui è racchiusa l’immagine.
Preciso che il div con classe "contenitore" avrà un'altezza variabile in base al suo contenuto.

Ovviamente questo potrebbe cambiare le proporzioni dell’immagine, in quanto la larghezza sarà sempre 33%, ma l'altezza potrà variare in base all'altezza del div contenitore.

Vorrei che l'immagine, anche se tagliata in ragione di quanto sopra, resti sempre centrata, sia in verticale che in orizzontale.

Potete darmi una mano?

Grazie!