Come usare HTML5 Elemento per ottenere un'immagine reattiva

Il Responsive Design può essere qui per rimanere, ma ci sono molti problemi che devono essere affrontati quando si tratta di rendere le immagini reattive . Sebbene le immagini reattive si ridimensionino automaticamente sulla dimensione della vista (che è tecnicamente semplice), un problema che gli utenti devono affrontare è che il punto della voce dell'immagine diventa appena visibile quando l'immagine diventa troppo piccola .

Il consenso ideale tra gli sviluppatori web è che anche la dimensione reale dovrebbe essere reattiva . Il browser dovrebbe essere in grado di caricare immagini più piccole o più grandi in base alla dimensione del viewport. In questo modo possiamo dirigere e fornire la migliore proporzione dell'immagine piuttosto che l'immagine ridotta (come mostrato).

È picture che entra in gioco l'elemento picture HTML5. L' picture ci consente di fornire più sorgenti di immagini e di controllare il recapito tramite Media Queries. Sebbene non ci siano ancora browser che implementano questo elemento, possiamo usare un polyfill chiamato Picturefill per farlo. Vediamo come è fatto, vero?

Iniziare

Picturefill è una libreria JavaScript sviluppata da Filament Group. Ci consente di utilizzare l'elemento picture ora. Per iniziare, scarica lo script nel repository Github e inserisci picturefill.js o picturefill.min.js . Picurefill è una libreria JavaScript autonoma che non richiede l'utilizzo di altre librerie. Puoi semplicemente aggiungerlo nel tag head .

L'immagine

Ho preparato un'immagine in tre dimensioni diverse, come segue. L'immagine è stata ritagliata per preservare l'attenzione sulla persona nell'immagine. Il piano qui è che mostreremo la dimensione più piccola in piccoli schermi e l'immagine più grande in schermi di grandi dimensioni.

Utilizzando Picture Element

Picturefill può funzionare in due modi: possiamo incorporare srcset nel tag img o utilizzare l'elemento picture . Qui opteremo per l'elemento picture in quanto è più gestibile, più facile da capire e più leggibile.

Simile agli elementi video e audio, l' picture avvolge più elementi source che puntano alla sorgente dell'immagine, come segue.

L'elemento source, come puoi vedere dallo snippet di codice precedente, è impostato con media attributo media . In questo attributo, specifichiamo il punto di interruzione della vista su cui deve essere presentata l'immagine. Puoi vedere immediatamente l'effetto.

Controlla la pagina demo e ridimensiona la dimensione della finestra, dovresti trovare l'immagine mostrata nella larghezza della finestra specificata.

Picturefill per WordPress

Se stai usando WordPress, puoi usare un plugin chiamato Picturefill.WP che ti permette di implementare l'elemento picture in WordPress, senza problemi. Basta caricare e incorporare la tua immagine come al solito, e questo plugin si occuperà del resto.

Pensiero finale

L'elemento picture è una grande aggiunta in HTML5. Abbiamo un maggiore controllo sulla dimensione e sulla dimensione dell'immagine che il browser dovrebbe presentare. E con picturefill possiamo usare questo nuovo elemento al momento anche se nessun browser lo ha ancora implementato. Picturefill funziona in una vasta gamma di browser, incluso in IE (anche se con alcune avvertenze).

Infine, guarda la demo e scarica il codice sorgente qui sotto.

• dimostrazione
• Scarica fonte

Ottieni una vasta collezione di strumenti di design su "Sans Francisco"

Può sembrare un nome strano, ma Sans Francisco è una grande risorsa per i designer. Il sito gestisce tutti gli strumenti migliori (gratuiti + a pagamento) per i progettisti, in oltre una dozzina di categorie.Questi strumenti vanno dalla verifica UI / UX ai programmi di progettazione di icone e strumenti di collaborazione per i team di progettazione .I

(Consigli tecnici e di design)

Le vere storie dietro 10 meme popolari

Un amico che conosco ama trasformare le foto dei suoi amici in meme. Scoprirà gli album di foto dei suoi amici su Facebook e selezionerà facce sfacciate e sfortunate da usare, aggiungerà del testo, quindi lo spargerà sui suoi ignari amici. È praticamente come nascono i meme.Ma a dire la verità, non tutti i meme diventano virali o lo rendono grande. Sebb

(Consigli tecnici e di design)