nr. 1
De kleine foto's blijven tijdens het schalen hun verhoudingen behouden. Ze hebben zelf een breedte van 100% meegekregen, en dat is dan 100% van wat hun container aan inhoud kan bevatten. De div met portret is 50% breed, die met de aap is 30%. Wanneer de divs kleiner worden blijven de foto's in verhouding.
De ratio van de achtergrondfoto verandert wel, het plaatje heeft de hoogte 100% gekregen en neemt dan ook de breedte van 100% (van de viewport) aan. Het hangt erg van de foto af of dat accepatabel is.
Deze tekstdiv heeft een vaste relatieve hoogte en is altijd 50% van de viewport. Hier staan 2 divs met die hoogte óp elkaar, de onderste is halftransparant wit en leeg, de bovenste heeft tekst. Bij klein beeld gaat de div scrollen. Bij groot beeld heeft de div van 50% hoogte ruimte over onder de tekst. Het roze voorbeeld linksboven voegt zich met een trucje wél naar het tekstvolume.
Ook de onderliggende tranparant roze div past zich aan de omvang van de tekst aan, dit in tegenstelling met de witte div linksonder. De roze div heeft dezelfde maten en positie én dezelfde inhoud (tekst) als de tekstdiv die er bovenop ligt, op die manier schaalt de achterste div als achtergrond mee. Dus moet je ook op twee plaatsen tekst aanpassen!
Ook de onderliggende tranparant roze div past zich aan de omvang van de tekst aan, dit in tegenstelling met de witte div linksonder. De roze div heeft dezelfde maten en positie én dezelfde inhoud (tekst) als de tekstdiv die er bovenop ligt, op die manier schaalt de achterste div als achtergrond mee. Dus moet je ook op twee plaatsen tekst aanpassen!