riservare spazio nel layout del browser per immagini reattive (impedendo il reflow)

Ho apportato modifiche per rendere il mio sito più reattivo e, in generale, questo è andato bene. Tuttavia, ho incontrato un problema:. Altezza e larghezzariservare spazio nel layout del browser per immagini reattive (impedendo il reflow)

Prima, ho sempre usato gli attributi su elementi img per riservare spazio nel layout per le immagini mentre il browser li carica in questo modo si evita il layout da masturbandosi mentre il browser carica e calcola lo spazio necessario per l'immagine.

Dopo aver reso le mie immagini più reattive, tuttavia, utilizzando max-width: 100% e eliminando gli attributi di altezza e larghezza, il browser non riserva più spazio per l'immagine (perché non sa più quanto sarà alta o ampia l'immagine in anticipo dato che non sono stato in grado di dirlo esplicitamente)

Il mio obiettivo è avere immagini reattive che occupino anche il loro spazio appropriato nel layout di pagina al momento del caricamento iniziale. Qualcuno sa di una soluzione per questo?

* MODIFICA (SOLUZIONE) - this is the best article I have found on the topic. Buon approccio!

fonte

2012-11-19 Brian FitzGerald

Mostrandoci il codice HTML potrebbe brillare po 'di luce sul problema. – Shmiddty

Non possiamo davvero sapere come aiutare finché non vediamo il codice che decide quanto devono essere grandi le immagini, quando viene eseguito quel codice, la pagina HTML e come le immagini vengono inserite nella pagina. – jfriend00

Come stai rendendo il sito reattivo? Stai caricando diversi fogli di stile in base alla larghezza e all'altezza del browser? – davehale23

La risposta corretta è quello di evitare che il reflow verticale utilizzando il "trucco padding-bottom". Per far funzionare questa tecnica, è necessario conoscere le proporzioni dell'immagine in anticipo.

Grazie a Anders M. Anderson per la pubblicazione di un eccellente articolo sul tema: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

fonte

2014-12-22 15:58:59

-2

Non vorrei prendere gli attributi di altezza e larghezza, basta provare a impostarli su automatico.

fonte

2012-11-19 16:45:47 Jason

Grazie per la risposta, ma impostandoli su auto non risolve il problema. Il browser non conserva ancora lo spazio appropriato per l'immagine nel layout. –

Ecco un modo per farlo. Non è fantastico, ma funziona. http://jsfiddle.net/78Lvc/11/

ho cambiato il tag di immagine per assomigliare a questo:

<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>

Avrete notato che ho aggiunto alcuni attributi e un onload. Dovrai aggiungere gli attributi nel codice o a mano. Il motivo per cui hai bisogno di altezza e larghezza è perché devi conoscere l'altezza dell'immagine per calcolare lo spazio richiesto in JS.

Poi in linea, ho questo codice:

<script> 
    //get the width of the browser right now 
    var containerWidth = document.body.offsetWidth; 
    //get the attributes that we have specified for this image 
    var imgWidth = document.getElementById("img").getAttribute("imgWidth"); 
    var imgHeight = document.getElementById("img").getAttribute("imgHeight"); 

    //since the img is to be 50% of the container width 
    var widthRatio = containerWidth/imgWidth/2 ; 

    //now set the height of the image 
    document.getElementById("img").style.height = (imgHeight * widthRatio) + "px"; 

    //once the image has actually loaded, run this 
    function fixMyWidth(){ 
     //this will make it 'responsive' again 
     document.getElementById("img").style.height = ""; 
     document.getElementById("img").style.width = ""; 
    } 
</script>

fonte

2012-11-19 22:16:16 davehale23

riservare spazio nel layout del browser per immagini reattive (impedendo il reflow)

risposta

Problemi correlati