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

Moet u een webontwerper inhuren of een webbouwer gebruiken?

Webbouwers zijn in feite een magische gereedschapskist voor niet-webontwerpers. Wat ooit buiten het bereik van mensen was, kan nu met weinig moeite worden begrepen. Maar er zijn dingen die webbouwers niet kunnen doen die webontwerpers kunnen. De vraag is nu: moet u een webdesigner inhuren om uw website voor u te maken of gewoon een webbuilder gebruiken en het zelf bouwen

(Technische en ontwerptips)

Facebook introduceert een AI-assistent in zijn Messenger-app

In 2015 plaagde Facebook de wereld met M, een digitale assistent die is gemaakt voor de Messenger-app. Nu, twee jaar nadat het voor het eerst werd onthuld, kan M nu worden gevonden in de nieuwste versie van de Messenger-app .Momenteel beschikbaar voor Messenger-gebruikers in de Verenigde Staten, met een wereldwijde release die kort daarna volgt, is M een digitale AI-assistent die in staat is om zijn gebruikers te helpen bepaalde taken uit te voeren

(Technische en ontwerptips)