Hoe HTML5 te gebruiken Element om een ​​responsieve afbeelding te bereiken

Responsive Design is misschien aanwezig, maar er zijn veel zaken die moeten worden aangepakt als het gaat om het responsief maken van afbeeldingen . Hoewel responsieve afbeeldingen zichzelf automatisch aanpassen aan de viewport-grootte (wat technisch eenvoudig is), is het probleem waarmee gebruikers worden geconfronteerd dat het beeldvocaal nauwelijks zichtbaar wordt wanneer het beeld te klein wordt .

De ideale consensus onder webontwikkelaars is dat de werkelijke dimensie ook responsief moet zijn . De browser moet in staat zijn om kleinere of grotere afbeeldingen te laden in overeenstemming met de viewport-grootte. Op die manier kunnen we het beste beeldaandeel sturen en afleveren in plaats van het verkleinde beeld (zoals weergegeven).

Dit is waar het HTML5- picture wordt weergegeven. Met de picture kunnen we meerdere afbeeldingsbronnen bieden en de aflevering regelen via Mediaquery's. Hoewel er nog geen browser is die dit element implementeert, kunnen we hiervoor een polyfill gebruiken die Picturefill heet. Laten we eens kijken hoe het klaar is, zullen we?

Ermee beginnen

Picturefill is een JavaScript-bibliotheek die is ontwikkeld door Filament Group. Hiermee kunnen we het beeldelement nu gebruiken. Download om te beginnen het script in de Github-repository en plaats het picturefill.js of picturefill.min.js . Picurefill is een standalone JavaScript-bibliotheek waarvoor geen andere bibliotheek vereist is. U kunt het gewoon toevoegen aan de head tag.

De afbeelding

Ik heb een afbeelding in drie verschillende dimensies gemaakt, als volgt. De afbeelding is bijgesneden om de focus op de persoon in de afbeelding te behouden. Het plan hier is dat we de kleinste afmetingen in kleine schermen en het grotere beeld in grote schermen laten zien.

Fotoelement gebruiken

Picturefill kan op twee manieren werken: we kunnen srcset in de img tag insluiten of het picture . Hier zullen we kiezen voor het beeldelement, omdat het overzichtelijker, eenvoudiger te lezen en leesbaarder is.

Net als bij video en audio elementen, bevat de afbeelding als volgt meerdere bronelementen die naar de beeldbron verwijzen.

Het bronelement, zoals u kunt zien in het bovenstaande codefragment, is ingesteld met media kenmerk. In dit kenmerk specificeren we het viewport-breekpunt waarop de afbeelding moet worden gepresenteerd. U kunt het effect onmiddellijk zien.

Bekijk de demopagina en wijzig het formaat van de viewport, je zou de afbeelding moeten vinden binnen de gespecificeerde viewport-breedte.

Picturefill voor WordPress

Als u WordPress gebruikt, kunt u een plug-in met de naam Picturefill.WP gebruiken waarmee u het beeldelement in WordPress zonder gedoe kunt implementeren. Upload en embed gewoon uw afbeelding zoals gewoonlijk, en deze plug-in zorgt voor de rest.

Laatste gedachte

Het picture is een geweldige toevoeging in HTML5. We hebben meer controle over de afbeeldingsgrootte en -dimensie die de browser zou moeten presenteren. En met picturefill kunnen we dit nieuwe element nu gebruiken, ook al hebben nog geen browsers het geïmplementeerd. Picturefill werkt in een breed scala van browsers, ook in IE (zij het met een paar kanttekeningen).

Zie tenslotte de demo en download de onderstaande broncode.

• demonstratie
• Download de bron

45 Creatieve bruidstaarten

Wij zijn fans van geeky cakes. Het is een geweldige manier voor het feestvarken of -meisje om de wereld te laten zien waar ze voor leven, waar hun bron van passie in het leven is. Dingen zijn niet veel anders als het gaat om bruidstaarten. Wanneer een paar een Super Mario of Star-Wars thema-bruidstaart kiest versus een traditionele bruidstaart op hun grote dag, toont het oprechte toewijding aan hun passie en aan elkaar

(Technische en ontwerptips)

Genereer documentatie met markdown-bestanden met behulp van Docsify

Als u een gratis plug-in, raamwerk of opensource-script maakt, hebt u documentatie nodig . Het is van cruciaal belang om uw werk te documenteren, zowel voor uw geestelijke gezondheid als om anderen te helpen die uw geweldige hulpbron willen leren.Het maken van online documentatie kan echter heel lastig zijn

(Technische en ontwerptips)