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

10 Belangrijke AMP-componenten (Accelerated Mobile Pages) die u moet kennen

Versnelde mobiele pagina's of AMP is het initiatief van Google om het mobiele web sneller te maken . Om dit doel te bereiken, beperken de AMP-standaarden de manier waarop u HTML, CSS en JavaScript kunt gebruiken en beheert u het laden van externe bronnen, zoals afbeeldingen, video's en advertenties via de eigen runtime

(Technische en ontwerptips)

10 dingen die we niet meer zouden moeten doen in groepschats

Het is waarschijnlijk veilig om te zeggen dat de meesten van ons tegenwoordig sms'en op berichten-apps in plaats van sms- berichten. De weinigen onder ons die nog steeds sms'en, worden echter belegerd met verzoeken om deze of die app te downloaden om berichtenkosten te besparen en omdat berichtenapps je veel meer kunnen laten doen, zoals het gelijktijdig verzenden van berichten naar een grote groep mensen

(Technische en ontwerptips)