Plaatje aanpassen aan de grootte van het window II:
Aanpak met CSS
Elders op deze site, in het item Plaatje aanpassen aan de grootte van het window, wordt beschreven hoe je het voor elkaar krijgt om de grootte van een plaatje aan te passen aan het beschikbare window. Bij die methode wordt de grootte van het plaatje ingesteld met behulp van JavaScript. Als de grootte van het window wordt gewijzigd wordt de pagina opnieuw geladen waarbij de grootte van het plaatje opnieuw wordt bepaald.
Op deze plaats wordt een aanpak voorgesteld waarbij gebruik gemaakt wordt van CSS. In combinatie met een recente browser is deze benadering betrouwbaarder, omdat beperkingen aan het gebruik van JavaScript worden omzeild.
- Besproken wordt hoe je dit kunt toepassen in je eigen website.
- Uitgewerkte voorbeelden zijn ook te vinden bij de items over het
gebruik van CSS voor het simuleren van frames, zoals DEZE.
- Hiernaast staat een plaatje. Als je de breedte van het window verkleint tot minder dat 800 pixels,
zul je zien dat het plaatje ook kleiner wordt.
N.B.: Dit werkt niet in de "normale" layout van deze site, omdat de content in een <iframe> staat. Om het effect te kunnen bekijken moet je de content even openen in eem nieuw tabblad. - Het verkleinen van de hoogte van het window heeft geen invloed op de grootte van het plaatje.
- Het werkt als volgt:
- Het plaatje is omgeven door een <div>-tag. Deze heeft id="plaatje".
- Het id staat in een style-block in de HEAD. De eigenschappen van het plaatje zijn daar gedefinieerd.
- Van de style-attributen die hier zijn opgegeven zijn alleen position en width (in procenten) echt nodig. Om een mooie opmaak te krijgen is margin eigenlijk onmisbaar, in combinatie met padding:0. De border is hier alleen gebruikt als voorbeeld, zodat je goed kunt zien hoe een en ander zich gedraagt.
- In de <img>-tag moet je de attributen width en height weglaten, anders wordt het resultaat onvoorspelbaar.
- Het attribuut width:50% dat in id="plaatje" is gebruikt, slaat op de breedte van de <div>-tag in het document, niet op de breedte van de figuur!.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>, op de plaats waar het plaatje moet komen).<style>
#plaatje { position:abolute; float:right; width:50%; margin:10px; padding:0; border:1px solid black}
</style>
<div id="plaatje">
<img src="hoezo-17.gif" width="100%" alt="De mallemolen van CSS">
</div>
Opmerking:
Deze aanpak is niet beperkt tot alleen plaatjes. Je kunt dit ook gebruiken voor andere zaken, zoals een
blok tekst.
