Tussen de afbeeldingen van mijn website zitten enorme ruimtes. Wie kan mij helpen? Lees ook de extra info.

Met mijn phpscript haal ik afbeeldingen op uit mijn mysql database. Deze afbeeldingen geef ik weer met een waarde van 60% van de werkelijke grootte. Dit doe ik om te zorgen dat er bij het inzoomen van de website niet al te groot qualiteitverlies optreedt.

Het php-script ziet er als volgt uit:

require 'connect.inc.php';

$query = "SELECT naam, linkafbeelding FROM landen ORDER BY id";
$table = '

';

if ($query_run = mysql_query ($query)) {

while ($query_row = mysql_fetch_assoc($query_run)) {
$naam = $query_row['naam'];
$linkafbeelding = $query_row['linkafbeelding'];

$table.= '';
}$table.= '
'.$naam.'

';


} else {
echo mysql_error();
}

?>


Het CSS-bestand zo:
img {display:block; float:left; max-width:60%; max-height:60% }

Nu worden de afbeeldingen wel allemaal met 60% van de werkelijke waarde weergegeven. Alleen blijft de cel van de tabel even groot, waardoor er grote ruimtes ontstaan tussen de afbeeldingen. Oftewel de cellen van de tabel passen zich niet aan aan de grootte van de afbeeldingen. Nu heb ik al geprobeerd de grootte van de td en table te veranderen maar dit heeft geen nut.

Hoe kan ik dit oplossen?

Weet jij het antwoord?

/2500

Het beste antwoord

De 60% die je gebruikt is altijd 60% van het 'containing block', in jouw geval de cel van de tabel. Die cel zal dus altijd 100% width en height hebben, waardoor er aan alle kanten 20% ruimte zit. Dat los je ook niet op door van div's gebruik te maken. Als je images een vaste grootte hebben kun je de width en height instellen op op een vast getal (bijv 100px wordt 60px).

Je moet de attribuut celpadding gebruiken voor de wit ruimtes tussen de borders en de content. Zet de border ook op 0. Anders zal je ook de attribuut cellspacing moeten gebruiken voor de witruimtes in de border.

1
Ik zou aanraden om gebruik te maken van div’s in plaats van een tabellen. Je hoeft hiervoor minder code te schrijven. Voorbeeld DIV: $query = "SELECT naam, linkafbeelding FROM landen ORDER BY id"; $maxcol = 4; if ($query_run = mysql_query ($query)) { $i=1; while ($query_row = mysql_fetch_assoc($query_run)) { $naam = $query_row[‘naam’]; $linkafbeelding = "’" . $query_row[‘linkafbeelding’] . "’"; $table.= "
$naam
"; if($i==$maxcol){$table.=’
 
’;$i=0; } $i++; } } Gebruik voor de div methode wel een padding=‘0’ en margin=‘0’.