Maak ook de foto’s op je website responsive!

Een responsive website waarop foto’s staan die dat niet zijn, heeft natuurlijk geen enkele zin!

Als je je website geschikt hebt gemaakt voor smartphones en tablets (bijvoorbeeld met behulp van een responsive ontwerp, dat zich automatisch aanpast aan de breedte van het beeldscherm), dan moet je de foto’s op je site daarbij niet vergeten.

Want als je website er mooi uitziet op een smal scherm, maar je bezoekers moeten nog steeds van links naar rechts scrollen om je foto’s helemaal te kunnen zien, dan heeft zo’n responsive ontwerp wat dat betreft niet zoveel zin. Op deze pagina leg ik je daarom uit hoe je je foto’s zó codeert, dat ze zich automatisch aanpassen aan de breedte van een browserscherm.

In de html- of css-code voor een foto leg je altijd vast in welk formaat deze moet worden weergegeven; dat kan hetzelfde formaat zijn als dat waarin hij op je server staat, maar je kunt een foto ook best kleiner laten weergegeven. De code voor een afbeelding ziet er bijvoorbeeld zo uit:

<img src="https://de-help-desk.nl/images/faq/webdesign/wereldkaart.jpg" alt="wereldkaart" style="width: 640px; height: 480px;">

Het is een vrij brede foto zoals je ziet, maar hij past nog wel binnen het tekstvak van mijn website. Dat wordt anders als ik de pagina smaller maak. Probeer het maar: schuif de zijkanten van je browserscherm naar elkaar toe en kijk wat er gebeurt: de layout van mijn site verandert en de inhoud herschikt zich mooi binnen dit smalle scherm. Alleen de foto verandert niet mee: die blijft even groot en je moet met de schuifbalk onderaan je scherm van links naar rechts scrollen om hem helemaal te kunnen bekijken. Dat is natuurlijk niet ideaal.

Gelukkig is dit probleem gemakkelijk te verhelpen. Het enige wat je daarvoor hoeft te doen, is de css-eigenschap max-width te gebruiken. Daarmee geef je aan dat een bepaald item nooit breder mag worden dan een bepaalde waarde. Als je aan je foto het stijlkenmerk max-width: 96% aangeeft, dan zal deze nooit meer ruimte innemen dan 96% van het onderdeel waarbinnen hij geplaatst is (je tekstvak bijvoorbeeld).

De height zet je op auto of je laat hem helemaal weg, zodat de hoogte van je foto zich automatisch aanpast aan de breedte ervan.

De code van hierboven verandert dus in:

<img src="https://de-help-desk.nl/images/faq/webdesign/wereldkaart.jpg" alt="wereldkaart" style="width: 640px; max-width: 96%; height: auto;">

Hieronder staat de foto nog een keer. Als je je scherm nog eens smaller maakt, dan zie je dat de tweede foto zich wel mooi aanpast aan de breedte van je scherm.