Imposta larghezza / altezza dell’immagine per evitare il ristream sul caricamento dell’immagine

Quando uso i tag immagine in html, cerco di specificare la larghezza e l’altezza nel tag img , in modo che il browser riservi loro lo spazio anche prima che le immagini vengano caricate, quindi quando terminano il caricamento, la pagina non si riflette ( gli elementi non si muovono intorno). Per esempio:

  

Il problema ora è che voglio creare una versione più “retriggers”, dove per il “caso a colonna singola” mi piacerebbe farlo:

  

ma, se mescolo questo con larghezza e altezza specificatamente specificate, come:

  

e l’immagine è più ampia dello spazio disponibile, quindi l’immagine viene ridimensionata ignorando le proporzioni. Capisco perché questo accade (perché ho “corretto” l’altezza dell’immagine), e vorrei sistemarlo, ma non ho idea di come.

Riassumendo: voglio essere in grado di specificare la max-width: 100% e in qualche modo assicurarmi che il contenuto non venga riflesso quando le immagini vengono caricate.

Sto anche cercando la risposta a questo problema. Con max-width , width= e height= , il browser ha abbastanza dati che dovrebbe essere in grado di lasciare la giusta quantità di spazio per un’immagine ma non sembra funzionare in questo modo.

Ho lavorato su questo con una soluzione jQuery per ora. Richiede di fornire width= e height= per i tag .

CSS:

 img { max-width: 100%; height: auto; } 

HTML:

  

jQuery:

 $('img').each(function() { var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100; $(this).wrap('
'); });

Questo applica automaticamente la tecnica vista su: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

All’inizio vorrei scrivere della risposta di ottobre 2013. Questa copia era incompleta e, a causa loro, non è corretta. Non usarlo. Perché? Possiamo vederlo in questo frammento (scorrere lo snippet eseguito verso il basso):

 $('img').each(function() { var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100; $(this).wrap('
'); });
 img { max-width: 100%; height: auto; } 
  
Some text

Per una soluzione css only, puoi racchiudere l’ img in un contenitore in cui la percentuale del padding-bottom pad riserva lo spazio sulla pagina fino al caricamento dell’immagine, impedendo il reflow.

Sfortunatamente, questo approccio richiede di includere le proporzioni dell’immagine nel proprio css (ma non è necessario per gli stili in linea) calcolando (o permettendo a css di calcolare per voi) la percentuale di padding-bottom basata sull’altezza e la larghezza dell’immagine.

Se molte delle tue immagini possono essere raggruppate in alcuni rapporti di aspetto standard, è ansible creare una class per ciascun rapporto aspetto per applicare la percentuale di padding-bottom appropriata a tutte le immagini con quel rapporto aspetto. Ciò potrebbe farti risparmiare un po ‘di tempo e fatica se non hai a che fare con un’ampia varietà di proporzioni dell’immagine.

Di seguito sono riportati alcuni esempi di html e css per un’immagine con proporzioni 2: 1:

HTML

 

CSS

 .container { display: block; position: relative; padding-bottom: 50%; /* calc(100%/(300/150)); */ height: 0; } .container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Il frammento di seguito aggiunge un po ‘di html, css e javascript extra per creare alcuni punti di riferimento visuali e di fondo e imitare un’immagine di caricamento molto lento in modo da poter vedere visivamente come il reflow viene prevenuto con questo approccio.

 const image = document.getElementById('image'); const source = 'https://via.placeholder.com/300x150'; const changeSource = () => image.src = source; setTimeout(changeSource, 3000); 
 .container { display: block; position: relative; padding-bottom: 50%; /* calc(100%/(300/150)); */ height: 0; } .container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .top, .bottom { background-color: green; width: 100%; height: 20px; } 
 

Da questo post del blog di Jonathan Hollin : aggiungi l’altezza e la larghezza dell’immagine come parte di uno stile in linea. Questo riserva spazio per l’immagine, impedendo il ristream quando l’immagine viene caricata, ma è anche retriggers.

HTML

 

CSS

 figure { position: relative; } img { max-width: 100%; position: absolute; } 

La figure può essere sostituita con un div o qualsiasi altro contenitore di tua scelta. Questa soluzione si basa su CSS calc () che ha un supporto browser piuttosto ampio .

Codepen di lavoro può essere visto qui .

AGGIORNARE:

Ho trovato una versione alternativa molto più intelligente di questo: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/ . Ciò richiede ancora un elemento wrapper e richiede proprietà personalizzate CSS, ma penso che sia molto più elegante. L’esempio di Codepen è qui (credito per l’ originale di Chris Coyier).

Se capisco i requisiti ok, vuoi essere in grado di impostare una dimensione dell’immagine, dove questa dimensione è nota solo per la generazione di contenuti (HTML), quindi può essere impostata come stili in linea.

Ma questo deve essere indipendente dal CSS, e anche prima del caricamento dell’immagine, quindi anche indipendente da queste dimensioni dell’immagine.

Sono giunto a una soluzione che implica il wrapping dell’immagine in un div, e includendo in questo div uno svg che può essere impostato per avere proporzioni direttamente come uno stile in linea.

Ovviamente questo non è molto semantico , ma almeno funziona

Il div contenente ha una class chiamata img per mostrare che, beh, dovrebbe essere una img

Per provare a riprodurre la fase di caricamento, le immagini hanno un src rotto

 .container { margin: 10px; border: solid 1px black; width: 200px; height: 400px; position: relative; } .img { border: solid 1px red; width: fit-content; max-width: 100%; position: relative; } svg { max-width: 100%; background-color: lightgreen; opacity: 0.1; } #ct2 { width: 500px; } .img img { position: absolute; width: 100%; height: 100%; max-height: 100%; max-width: 100%; top: 0px; left: 0px; box-shadow: inset 0px 0px 10px blue; }