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: '; if ($query_run = mysql_query ($query)) { while ($query_row = mysql_fetch_assoc($query_run)) { $naam = $query_row['naam']; $linkafbeelding = $query_row['linkafbeelding']; $table.= ' '.$naam.' '; }$table.= ' '; } 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?

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?

Verwijderde gebruiker

11 jaar geleden

in: Programmeren

973

973 keer bekeken

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

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).

(Lees meer...)

rose

11 jaar geleden

Verwijderde gebruiker

11 jaar geleden

Dit ook, Ik had wat te snel gelezen om dat probleem ook te zien. Je kan het liefst een tumbnail versie van elke plaatje maken.
En het dan zo bij te verkleinen en bij te knippen(croppen) dat elke tumbnail plaatje dezelfde grootte krijgt, met de juiste verhouding. Er bestaat een jquery library waarbij je dit process kan automatiseren. http://deepliquid.com/content/Jcrop_Download.html Of je kan je plaatjes uploaden naar de volgende service dit voor jouw automatisch omzet. http://www.croppola.com/ Met de instructies van mij hierboven kan je de wit ruimtes uiteindelijk verder minimaliseren. Maar jouw probleem wordt volgens mij grotendeels opgelost met het verkleinen en croppen van je jouw plaatjes.

Verwijderde gebruiker

11 jaar geleden

+1 trouwens :P dit is ook een belangrijke punt waarop gelet moet worden.

Verwijderde gebruiker

11 jaar geleden

duidelijk!

Andere antwoorden (1)

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.

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’.

(Lees meer...)

Verwijderde gebruiker

11 jaar geleden

Verwijderde gebruiker

11 jaar geleden

Jouw php script creert een tabel met 1 rij. Mocht je een gallery willen maken met meerdere rijen dan zal je de tag in de while loop moeten zetten. Met een teller en een if loop kan je dan de tag openen en sluiten als de limiet is bereikt. Voorbeeld TABLE:
$query = "SELECT naam, linkafbeelding FROM landen ORDER BY id";
$maxcol = 4;
if ($query_run = mysql_query ($query))
{ $table = ’’;
$i=1;
$j=1;
$aantalplaatjes=count($query_run);
while ($query_row = mysql_fetch_assoc($query_run))
{
if($i==1){$table .= ’’;}
$naam = $query_row[‘naam’];
$linkafbeelding = "’" . $query_row[‘linkafbeelding’] . "’";
$table.= "";
if($i==$maxcol || $j==$aantalplaatjes){$table .= ’’; $i=0;}
$i++;
$j++;
}
$table .= ’

$naam

’;
} Je zal ook een algorithme moeten maken om de overgebleven kolommen bij te vullen.
De bovenstaande code kan de tabel doen breken als je bijv maar 5 plaatjes hebt.

Verwijderde gebruiker

11 jaar geleden

Let ook op je plaatjes. Als deze ongewenste wit ruimtes bevatten dan zal je alsnog witruimtes opmerken. Dit kan je met de gratis opensource programma gimp makkelijk wegknippen.

Verwijderde gebruiker

11 jaar geleden

Een maximaal aantal plaatjes op een rij had ik al gemaakt:
$query = "SELECT naam, linkafbeelding FROM europa ORDER BY id";
$table2 = ''; if ($query_run = mysql_query ($query)) {
$counter = 0;
while ($query_row = mysql_fetch_assoc($query_run)) {
if ($counter++ % 5 == 0) {
if ($counter > 0) {
$table2 .= "";
} }
$naam = $query_row['naam'];
$linkafbeelding = $query_row['linkafbeelding'];

$table2.= '';
if ($counter > 0) {
}
}
$table2.= '

'.$naam.'

'; } else {
echo mysql_error();
} ?> Maar een cellpadding en cellspacing van 0 werken beiden niet. Als ik div's wil gebruiken dan moet ik eerst weten hoe ik $table2 moet definieren, hoe moet ik die definieren?

Verwijderde gebruiker

11 jaar geleden

Excuse! In de div voorbeeld van hierboven moet inderdaad de table variable gedefinieerd worden voordat de while loop begint. Een lege variable definieeren is voldoende.
table = ""; Als je alsnog tables wilt gebruiken dan is het gebruik van de attribuut cellpadding alleen geldig als je het gebruikt in een html tag.
Voorbeeld: Als je iever lCSS wilt gebruiken dan werkt celpadding:0; niet. Css kent dit namelijk niet. Wat je wel kan doen is het volgende.

Verwijderde gebruiker

11 jaar geleden

voor de div manier moet je trouwens wel de float css gebruiken.

De style="clear:both" zorgt ervoor dat je een nieuwe rij begint.
Zoals in de voorbeeld is aangegeven. clear:both is niet noodzakelijk, het springt(float) namelijk automatisch naar de volgende rij als de maximum wijdte van de parent div is bereikt. http://www.joseblog.netau.net/web_design/simple-php-photo-gallery-using-mysql.php

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 2500