Uso dell'attributo Dimensioni per immagini di ripiego

Question

Sto cercando di riprendermi usando srcset e sizes sui tag img.

Mentre penso di aver colto le nozioni di base - principalmente grazie all'articolo this - Ho difficoltà nell'applicazione pratica dell'attributo sizes.

In tutti gli esempi che riesco a trovare, le cose sono enormemente semplificate e l'attributo delle dimensioni è dichiarato come se ad ogni punto di interruzione, la larghezza dell'immagine fosse una proporzione esatta della larghezza della finestra, consentendo l'uso di unità vm. Ad esempio:

sizes="(min-width: 36rem) 33.3vw, 
     100vw" 

Naturalmente nella vita reale, le immagini sono spesso all'interno altri recipienti stessi potrebbero essere all'interno di altri contenitori e così via, ciascuno con il proprio margine, padding o posizionamento.

È giusto dire che in tutti i casi tranne i più semplici (quando le immagini sono di larghezza fluida e non sono semplicemente una percentuale esatta del viewport), è necessario utilizzare calc, aggiungendo potenzialmente calcoli estremamente complessi al markup html come le dimensioni di una immagine devono essere calcolate lavorando dalla larghezza della finestra, in basso attraverso qualsiasi contenitore all'immagine? Ad esempio, come calcoli la dimensione corretta per un'immagine che si trova un contenitore con padding 7px che si trova all'interno di un contenitore che è il 45% del suo contenitore con margine di 15px che si trova all'interno di una barra laterale che è il 25% del contenitore della pagina principale che ha 15px di padding e ha una larghezza minima di 1220px?

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)), 
     100vw" 

Cercando di calcolare questo nei formati attributo sembra ridicolo, tanto più che tutto questo potrebbe cambiare in ogni punto di interruzione. dover mantenere questo calcolo estremamente complesso in sincronia con le modifiche al CSS sembra una follia. E poi hai il supporto per browser patchy per calc.

Mi sento come se mi mancasse qualcosa di ovvio, ma che cos'è?

Nota: Sono consapevole di Alexander Farkas di eccellente Lazy Sizes che fa i calcoli di dimensioni per l'utente attraverso l'utilizzo di data attributi, ma io sono interessato a uso standard.

Answer 1

Prima di tutto% unità non sono consentite in sizes. Devi usare unità vw. (Che può includere la larghezza della barra di scorrimento). Ad esempio, il tuo 25% diventa 24-25vw. Secondo non c'è una vera differenza tra rem e em (nel contesto dell'attributo size). Nel caso in cui non si utilizzino le query dei media basate su em/rem/min-width/max-width nel CSS, non utilizzare mai quelle nell'attributo delle dimensioni.

In pratica le dimensioni non devono necessariamente corrispondere esattamente alla dimensione dell'immagine reale al 100%. È indicativo che il browser trovi approssimativamente il candidato giusto per l'immagine.

La larghezza minima: la regola di 1200 px come anche l'utilizzo di larghezza massima nel CSS, deve essere chiaramente parte di una nuova condizione di supporto nell'attributo delle dimensioni.

Questo ci lascia con la seguente parte formati:

(min-width: 1200px) calc(11vw - 44px) 

Nel caso in cui si aggiunge hanno un max-width personalizzata o di una media query che si ferma la barra laterale di crescere, si può essere meno corrette e semplicemente trasformare 11vw - 44px in 10vw:

Ad esempio:

sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>" 

Informazioni sul supporto calc: picturefill 3.0 beta come anche respimage, fare includere il supporto calc per IE8 +, in modo da tutti i browser s che supportano le dimensioni hanno un supporto calc sufficiente e tutti i browser polyfilled di respimage supportano anche calc in size.

Informazioni su come procedere. Questo è chiaramente doloroso e nella maggior parte dei casi il vostro sistema CMS/back-end dovrebbe aiutare qui. Nella maggior parte dei progetti è necessario concordare una serie limitata di formati di immagini consentiti e scrivere le dimensioni per quelle corrispondenti al proprio disegno. E il tuo back-end dovrebbe riuscire a collegare quelle dimensioni nel posto giusto. Nel caso questo non sia possibile. O utilizzare effettivamente lazySizes o utilizzare srcset con sizes almeno per le immagini più importanti (vale a dire grandi formati di immagine, perché è qui che è possibile salvare i dati più).

---

Se si desidera, è possibile scegliere un sito Web reale e allega le dimensioni corrette corretti. Ma attenzione. Deve essere solo a larghezza limitata. Lo standard al momento non supporta le immagini con limiti di altezza (questa è solo una funzione lazysizes).