Beste SD'ers,

Voor een lopend project ben ik op zoek naar een css / responsive design expert.

Het gaat om het volgende:
Ik wil graag in een div welke (width: 100% en height: 630 is zo veel mogelijk afbeeldingen naast elkaar en onder elkaar). Deze afbeeldingen zijn alle 135px width en 90px hoog.

Deze dienen allemaal aan elkaar aan te sluiten om vervolgens de GEHELE breedte te overbruggen. Maar als de pagina kleiner wordt wordt er aan de linkerkant een wit stuk zichtbaar. Dit komt doordat float:left hier niet meer kan (wordt te breed).

Indien u een url nodig heeft, stuur me dan een PM
Ook ontvang uw tarief voor het oplossen van het probleem per PM

met vriendelijke groet,
Tom Giesbergen

Lijkt me logisch toch? Als je je afbeeldingen een vaste breedte geeft passen er maar zoveel naast elkaar. Bij een breedte van 405 pixels passen er dus precies 3 afbeeldingen van 135 px naast elkaar (immers, 3 x 135 = 405).

Als je echter een browserbreedte hebt van 480 px passen er geen 4 afbeeldingen naast elkaar, dus dan krijg je 3 afbeeldingen met een totale breedte van 405 px en een witruimte van (480-405) 75 pixels. De browser kan immers geen halve afbeelding weergeven en een hele past niet dus die verdwijnt naar de volgende regel.

@ Marcel,

Nee, dat is ook helemaal duidelijk! Ik vraag dus juist om hoe ik dit zou kunnen oplossen. De max-wdith van de image mag dan 135 zijn!

Aha, een max-width van 135 px... dat stond er niet ;-)

@ Marcel,

Ja sorry dat was ik er vergeten bij te melden. Wat ik dus graag wil weten is hoe ik de images zo kan stylen dat de background altijd volledig 100% gevuld is met image's. Met andere woorden:
Indien er 13 afbeeldingen naast elkaar kunne dan 13. Past dit niet, dan den image's verkleinen tot min-width: 100; Wordt het scherm weer kleiner? Dan 12 images met een width van 165px