/ / Adatta l'elemento all'interno dell'elemento genitore: javascript, jquery, matematica

Adatta elemento all'interno dell'elemento genitore - javascript, jquery, matematica

Sto provando a fare quanto segue:

Adatta un'immagine ENORME a un piccolo elemento div mantenendo le proporzioni.
Ma senza usare il trucco CSS come max-width. Imposta manualmente la larghezza / altezza sui valori corretti.

Questo è il modo più semplice per spiegare ciò che sto cercando di fare.
Ho ottenuto i seguenti valori:

Larghezza / altezza originali dell'immagine.
Larghezza / altezza del div target.

Ho provato il seguente esempio per adattarlo all'elemento genitore.

if(ratio < 1) {
setWidth = Math.round((targetH * ratio));
} else {
setHeight = Math.round((targetW / ratio));
}

Che osserva le proporzioni e ridimensionalo usando quello.
Funziona bene fintanto che le proporzioni sono inferiori a 1. Se supera, l'altezza inizia a incasinarsi. Sembra anche saltare quando hai ottenuto da 0,99 a 1 con abbastanza altezza extra.

risposte:

0 per risposta № 1

Joe mi ha lasciato sulla strada giusta con il link che ha inviato a un'altra domanda di StackOverflow. Il seguente codice è quello che ho finito per usare.

"larghezza"essendo la larghezza corrente dell'elemento da ridimensionare.
"altezza"essendo l'altezza attuale dell'elemento da ridimensionare.
"targetW"essendo la larghezza massima della scala.
"targetH"essendo l'altezza massima della scala.

Si adatta perfettamente all'elemento all'interno dell'elemento genitore. Indipendentemente dalle proporzioni.

if(width > targetW){
ratio = targetW / width;
height = height * ratio;
width = width * ratio;
}

if(height > targetH){
ratio = targetH / height;
width = width * ratio;
height = height * ratio;
}

Grazie a @Joe