Slik bruker du HTML5 Element for å oppnå responsivt bilde

Responsive Design kan være her for å bli, men det er mange problemer som må tas opp når det gjelder å gjøre bilder lydhør . Selv om responsive bilder automatisk tilpasser seg størrelsen på visningsporten (noe som er teknisk enkelt), er det et problem med brukerne at bildet vokalpunktet blir knapt synlig når bildet blir for lite .

Den ideelle konsensus blant webutviklere er at den faktiske dimensjonen burde være responsiv også . Nettleseren skal kunne laste mindre eller større bilder i samsvar med visningsportstørrelsen. På den måten kan vi styre og levere den beste bildedelen i stedet for det krypte bildet (som vist).

Dette er hvor HTML5-bildeelementet kommer inn. picture tillater oss å gi flere bildekilder og kontrollere leveransen gjennom Media Queries. Selv om det ikke finnes noen nettleser som implementerer dette elementet ennå, kan vi bruke en polypfyll som heter Picturefill for å gjøre dette. La oss se hvordan det er gjort, skal vi?

Starter

Picturefill er et JavaScript-bibliotek utviklet av Filament Group. Det tillater oss å bruke bildeelementet nå. For å komme i gang, last ned skriptet i Github-depotet og legg picturefill.js eller picturefill.min.js . Picurefill er et frittstående JavaScript-bibliotek som ikke krever noe annet bibliotek til å fungere. Du kan ganske enkelt legge den til i hodetiketten.

Bildet

Jeg har laget et bilde i tre forskjellige dimensjoner, som følger. Bildet er beskåret for å bevare fokus på personen i bildet. Planen her er at vi vil vise den minste størrelsen i små skjermbilder og større bilde i store skjermer.

Bruke bildeelement

Picturefill kan fungere på to måter: vi kan legge inn srcset i img taggen eller bruke bildeelementet. Her velger vi bildeelementet som det er mer overskuelig, lettere å undestand, og mer lesbart.

I likhet med video og lydelementer, brytes picture flere source som peker på bildekilden, som følger.

Kildeelementet, som du kan se fra koden ovenfor, er satt med medieattributt. I denne egenskapen spesifiserer vi visningsportpunktet hvor bildet skal presenteres. Du kan se effekten umiddelbart.

Sjekk demo siden, og endre størrelsen på visningsportstørrelsen, bør du finne bildet vist innenfor den angitte visningsbredden.

Bildefyll for WordPress

Hvis du bruker WordPress, kan du bruke et plugin kalt Picturefill.WP som lar deg implementere bildeelementet i WordPress, uten å måtte ha problemer. Bare last opp og legg inn bildet ditt som vanlig, og dette pluginet tar vare på resten.

Endelig tanke

Bildeelementet er et flott tillegg i HTML5. Vi har mer kontroll over bildestørrelsen og dimensjonen som nettleseren skal presentere. Og med bildefylling kan vi bruke dette nye elementet akkurat nå, selv om ingen nettlesere har implementert det enda. Picturefill fungerer i et bredt spekter av nettlesere, inkludert i IE (riktignok med noen advarsler).

Til slutt, se demonstrasjonen og last ned kildekoden nedenfor.

• Demo
• Last ned kilde

25 tilfeldige freebies for webdesignere

Det er mange designere der ute som er hyggelige nok til å lage freebies og dele dem med samfunnet. Hvis du er ute etter mockups, ui-kits, PSD-maler, skrifter, ikoner, merkevarepakker og mer, har vi noen av dem satt sammen i dette innlegget. Alt du trenger å gjøre er å laste dem ned, og rediger og tilpass disse freebies for prosjektet ditt.Mer

(Tekniske og design tips)

20 kreative annonser som gjør at du vil vente på heisen

Annonser gjennom massemedier og bannere blir for vanlige at folk har blitt vant til å ignorere disse annonsene, og til tider aktivt å unngå dem . Så mye er brukt på å annonsere at manglende å gripe forbipasserende oppmerksomhet er bare et hint at teknikken som brukes, ikke er god nok.Fra reklametavler og busser gjør vi nå oppmerksomheten til heisannonser. Mens bu

(Tekniske og design tips)