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

Løsninger til PC Overoppheting og hvordan du holder det kul

Er din PC oppvarming som Uncle Toms grill? Vel, det er definitivt et av tegnene på at datamaskinen din kan være i trøbbel. Varme kan redusere PC-en og automatisk slå den ned som fører til tap av data, eller permanent skade på komponentene. Hvis din stasjonære eller bærbare datamaskin er oppvarming, må du umiddelbart gjøre noe.I dette i

(Tekniske og design tips)

Slik ser du avkortede nettadresser uten å åpne dem

Hvis du noen gang kommer over en lenke i e-post eller på et nettsted, må du alltid holde musemarkøren over den for å se destinasjonsadressen nederst i nettleseren for å sikre at den er trygg. Men dette trikset fungerer ikke med forkortede nettadresser som er ganske vanlige i disse dager på sosiale medier.Dette

(Tekniske og design tips)