Uit de cursus: Basistraining HTML

Krijg toegang tot deze cursus met een gratis proefabonnement

Word vandaag lid en krijg toegang tot meer dan 23.000 cursussen geleid door branchedeskundigen.

Responsieve afbeeldingen

Responsieve afbeeldingen - tutorial HTML

Uit de cursus: Basistraining HTML

Gratis proefversie van 1 maand starten Aanschaffen voor mijn team

Responsieve afbeeldingen

“

- In de laatste twee video's liet ik je het bronset-attribuut in grootten voor het afbeeldingselement zien en hoe ze konden worden gebruikt om meerdere afbeeldingsbestanden aan de browser te leveren en deze te laten beslissen welke te laden en weer te geven. In al die voorbeelden was het beeld zelf, de foto van een hond dezelfde foto. Het was opgeslagen als veel verschillende kopieën met meer pixels of minder pixels, maar de inhoud van de foto was de hele tijd hetzelfde. De manier waarop het werd bijgesneden, de beeldverhouding. Maar wat als we meer willen doen dan een bestand met lage resolutie inruilen voor een bestand met hoge resolutie? Wat als we een ander beeld willen gebruiken op een klein scherm dan op een groot scherm? Misschien willen we dat het beeld lang en smal is op mobiel, waar het kort en breed is op desktop. Of zelfs een heel andere foto gebruiken. Laten we eens kijken naar een ander voorbeeld. Hoe zit het met deze foto, op grote schermen, zal een deel van het veld…

Inhoud