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

De PiP-modus van YouTube gebruiken in de Chrome-browser

Met de Picture-in-Picture (PiP) -modus van YouTube kunnen gebruikers video's bekijken in een klein venster bij de hoek, terwijl ze door andere video's op YouTube bladeren. We gebruiken deze functie al op de YouTube- apps voor Android en iOS.Standaard kunnen we deze functie echter niet gebruiken op de YouTube-webversie, tenzij u natuurlijk de juiste plug-in kent om te installeren

(Technische en ontwerptips)

8 populaire productiviteitstoepassingen voor ontwerpers in 2018

Brengt u veel tijd door met vergaderingen te jongleren, deadlines voor projecten te plannen en dergelijke? Zo ja, dan zul je uiteindelijk het gevoel krijgen dat je werkende leven niet zo hoort te zijn.Dit kan gelden voor zowel teams als voor ondernemende freelancers. Ze besteden een aanzienlijke hoeveelheid tijd aan het proberen georganiseerd te blijven

(Technische en ontwerptips)