Aiuto per corretto dimensionamento immagine

[ivanisevic82]

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

<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!

[KillerWorm]

Ciao, prova con la proprietà object-fit col valore cover. Dovrai comunque impostare l'altezza dell'immagine al 100%.

.immagine {
  width: 33%;
  height: 100%;
  object-fit: cover;
}

[ivanisevic82]

Ciao, prova con la proprietà object-fit col valore cover. Dovrai comunque impostare l'altezza dell'immagine al 100%.

.immagine {
  width: 33%;
  height: 100%;
  object-fit: cover;
}

Grazie KillerWorm, funziona!

Avrei bisogno però di apportare una ulteriore modifica.
Questo è l'esempio di codice aggiornato e funzionate (puoi testarlo con un semplice copia incolla):

<div class="contenitore">

<img class="immagine" src="https://www.sinonimi-contrari.it/includes/images/sharers/sinonimi-di-prova.png" >


<div class="testo">
Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah 
</div>


</div>




<style>


.immagine {
width: 32%;
 height: 100%;
  object-fit: cover;
  object-position: center;
float: left;
}


.testo {
width: 63%;
height: auto;
float: right;
}


.contenitore {
height: 200px;
}


</style>

Come puoi vedere l'altezza dell'immagine è determinata da quella del contenitore, impostata in maniera assoluta.

Io invece vorrei che l'altezza dell'immagine sia determinata dall'altezza del testo.

Quindi, in pratica, l'elemento contenitore dovrebbe avere un'altezza variabile in base all'altezza del testo e di conseguenza anche l'immagine (la cui altezza riempie l'intero contenitore), avrebbe l'altezza correttamente impostata.

Ho provato a dare al contenitore height: auto, ma non funziona correttamente, in quanto in questo modo la sua altezza viene impostata sulla base dell'altezza nativa dell'immagine.

Come si potrebbe risolvere?

Grazie!

[KillerWorm]

Come puoi vedere l'altezza dell'immagine è determinata da quella del contenitore, impostata in maniera assoluta.

sì, esatto, quando il contenitore ha altezza fissa, quella dell'immagine, espressa in percentuale, si basa su quella del contenitore; ma se il contenitore ha un'altezza automatica direi che va a crearsi una sorta di circolo vizioso.

L'altezza del contenitore, se non è definita esplicitamente, si basa sui suoi contenuti. Per cui, finché l'immagine sta nel normale flusso dei contenuti, l'altezza del suo genitore (il div "contenitore") viene calcolata basandosi, per l'appunto, anche su questa. Va da sé che l'algoritmo di calcolo delle dimensioni, in tal caso, non può determinare un valore percentuale per l'altezza di quell'immagine (perché dovrebbe basarsi su quella del contenitore che si basa sui suoi contenuti), per cui sarà assunto il valore "auto".

Per "imbrogliare" il sistema, dovresti rimuovere l'immagine dal normale flusso dei contenuti, così che questa non sia presa in considerazione per il calcolo dell'altezza del contenitore. Puoi quindi impostare, per questa, un posizionamento assoluto (position:absolute), mentre per il contenitore (perché il metodo funzioni) andrà impostato un posizionamento diverso da "static" (ad esempio position:relative).

A quel punto l'ingombro del contenitore sarà calcolato non tenendo conto dell'immagine (che è fuori dal normale flusso dei contenuti per via del position:absolute), quindi l'altezza dell'immagine può "tranquillamente" essere calcolata in percentuale, basandosi su quella del contenitore.

Tieni comunque presente che l'uso del float "confonderebbe" il calcolo degli ingombri, meglio usare un metodo alternativo, magari applicare semplicemente un margin-left al testo.

Qui un esempio:

<style>
.contenitore {
  position: relative;
  background: #eee;
}
.immagine {
  position: absolute;
  width: 32%;
  height: 100%;
  object-fit: cover;
}
.testo {
  margin-left: 37%;
}
</style>
<div class="contenitore">
  <img class="immagine" src="https://www.sinonimi-contrari.it/includes/images/sharers/sinonimi-di-prova.png" alt="">
  <div class="testo">
    Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah Prova Blah Blah Blah 
  </div>
</div>

Ho applicato un colore di background a .contenitore giusto ai fini dimostrativi, per evidenziarne i limiti.

Vedi se questo risolve; fai sapere.

[ivanisevic82]

Funziona alla grande! Grazie!