Ho una specie di presentazione in cui le immagini si espandono il più possibile, ma non superano la larghezza o l'altezza della finestra. Fondamentalmente object-fit: contain.Posso usare <picture> per immagini con altezza e larghezza?
Mi piacerebbe rendere queste immagini reattive, poiché "quanto più grande è possibile" per un telefono e un grande desktop grande è la differenza. Non riesco a utilizzare <img srcset> perché al momento, fa solo la densità dello schermo (x descrittori) o la larghezza (w descrittori). Così lascia <picture> per fare manualmente la logica di selezione da solo.
ho iniziato con:
<picture>
<source media="(orientation:portrait)"
sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<source sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<img src="default.jpg" alt="a man slipping on a banana peel">
</picture>
ma non è così semplice come l'orientamento dello schermo, dal momento che le proporzioni attuali coinvolti possono ottenere abbastanza esotico, sia per le finestre (telefoni molto alte, barre degli strumenti del browser, ecc) e per le immagini stesse; la stessa immagine potrebbe essere limitata in larghezza su uno schermo, ma vincolata in altezza su un altro. Immagino di poter scrivere uno script che analizzi i rapporti di aspetto, ma sono perplesso sulla logica di trasformarlo in un significativo elenco srcset e sizes.
Idealmente<img srcset> sarà get the h descriptor soon, ma mi piacerebbe incidere qualcosa insieme che funziona ora.
La testina non funziona al momento, ma è necessario solo modificare le dimensioni e, nel caso in cui si esegua tutto con JS, è necessario calcolare solo un valore di dimensioni in pixel, quindi non così difficile. (Potrei provare a fare un plugin lazySizes per questo). –
In generale se è sempre il viewport e non un elemento più piccolo che stai utilizzando, di quanto lo hai se è larghezza vincolata sempre sizes = "100vw" e se è height constrained sizes = "calc (100vh * (heightOfImage/widthOfImage)) " –
Per la prova di base del concetto, sì, sarà l'intera finestra, ma nella produzione saranno immagini all'interno di vari contenitori – Tigt