Image resizing.

Door Bram Ergelo op 15-12-2009 23:36

1.608 views

Hallo,

ik heb een pagina die er als onderstaand uitziet.Nu wil ik dat de afbeelding, wanneer deze een grotere afmeting heeft dan 500x500 pixels, hij kleiner wordt gemaakt.
Nu heb ik voor Firefox gewoon simpel max-width: 500px; en max-height: 500px; gebruikt, dat werkt redelijk. Voor IE had ik ook iets gevonden, maar deze maakt elke afbeelding 500x500 ipv hem te 'verschalen'.

Ik kom er niet uit hoe ik dit nou het best kan oplossen.

Verder heb ik nog het probleem dat mijn onderschriften maar niet netjes gecentreerd onder de afbeelding komen te staan, zowel in FF als IE krijg ik het niet voor elkaar.

Hulp zou erg welkom zijn,

Bedankt.

<?XHTML
<html>
<head>
<style>
body{
background-color: black;
text-align: center;
color: #b2b2b2;
font-family: impact;
font-size: 4em;
overflow: auto;
}
.wrapper{
margin: 0 auto;
text-align:center;
border: 0px solid black;
width: 1000px;
}
.wrapper2{
-moz-border-radius: 0.6%;
float: left;
margin: 0 0;
border: 1px solid white;
text-align: center;
width: 841px;
}
.header{
width: 997px;
height: 148px;
}
.left, .right{
text-align: center;
float: left;
width: 148px;
border-collapse: collapse;
height: 540px;
border: 0px solid white;
}
.right2{
-moz-border-radius: 5%;
float: left;
margin-left: 18px;
width: 137px;
border: 1px solid white;
height: 540px;
}
.middle{
text-align: center;
float: left;
width: 540px;
height: 540px;
}
.image{
margin: 20 20 0 20;
line-height: 500px;
vertical-align: middle;
max-width: 500px;
max-height: 500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
border: 0px solid white;
}
.onderschrift{
margin: 0px;
font-family: arial;
font-size: 12px;
line-height: 20px;
position: absolute;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body >
<div class="wrapper">
<div class="header">
</div>
<div class="wrapper2">
<div class="left">
Li
</div>
<div class="middle">
<img id="image" class="image" alt="1.jpg" src="/images/1.jpg"/>
<p class="onderschrift">Onderschrift</p>
</div>
<div class="right">
Re
</div>

</div>
<div class="right2">
sub
</div>
</div>
</body>
</html>
?>

Tamara

16-12-2009 07:58

gewoon bij de <img> een width="500" geven. probleem opgelost ;)

Bram Ergelo

16-12-2009 08:45

Het is de bedoeling dat de afbeelding zijn originele grootte behoud wanneer hij kleiner is dan 500x500, maar dat hij netjes meeschaalt wanneer hij groter is.

Tamara

16-12-2009 08:48

ik denk dat je met getimagesize() moet werken...

anders even googlen

Niels K

16-12-2009 12:35

Klein voorbeeldje, wel aanpassen naar jouw ding dit is zo copy, past van een andere scriptje

<?php
list ($breedte, $hoogte, $image_type) = getimagesize($foto_naam);

# Stap 2: bepaal de verhouding tussen hoogte en breedte
$image_ratio = $breedte/$hoogte;

# Stap 3: bereken op basis van de ratio de nieuwe hoogte
if($image_ratio > 1)
{
$tn_breedte = $thumb_size;
$tn_hoogte = $thumb_size / $image_ratio;
}
else
{
$tn_hoogte = $thumb_size;
$tn_breedte = $thumb_size * $image_ratio;
}

# Stap 4: maak een lege thumbnail in het geheugen van de server
$thumb = imagecreatetruecolor($tn_breedte,$tn_hoogte);

# Stap 5: afhankelijk van het type foto het juiste type thumbnail maken
switch ($image_type)
{

case IMAGETYPE_GIF:
$source = imagecreatefromgif($foto_naam);
break;

case IMAGETYPE_JPEG:
$source = imagecreatefromjpeg($foto_naam);
break;

case IMAGETYPE_PNG:
$source = imagecreatefrompng($foto_naam);
break;

default:

# vangnet, dit komt als het goed is nooit voor.
# indien toch: trachten gif-bestand te maken
$source = imagecreatefromgif($foto_naam);
break;

}

# Stap 6: De grote foto verkleinen en kopieren naar de thumbnail
imagecopyresampled($thumb, $source, 0, 0, 0, 0, $tn_breedte, $tn_hoogte, $breedte, $hoogte);

# Stap 7: naam van de thumbnail instellen
$thumbname= $upload_dir ."thumbnails/" . "thmb_" . $_FILES['foto']['name'];

# Stap 8: tot slot: de thumbnail opslaan, opnieuw afhankelijk van het type
switch ($image_type)
{

case IMAGETYPE_GIF:
imagegif($thumb, $thumbname);
break;

case IMAGETYPE_JPEG:
imagejpeg($thumb, $thumbname, 100);
break;

case IMAGETYPE_PNG:
imagepng($thumb, $thumbname);
break;

}
?>

Bram Ergelo

16-12-2009 17:26

Bovenstaand script maakt thumbnails aan, door images te kopieren en een nieuwe grootte te geven. Dat is mijn bedoeling niet.

Het enige wat ik wil, is dat hij de afbeeldingen uit mijn images map haalt, en deze in de zelfde schaal, verkleint naar een formaat dat past binnen bijvoorbeeld 500 × 500 pixels.

Het lijkt me sterk dat dat alleen mogelijk is door de afbeeldingen te dupliceren in een nieuwe grootte?

Bram Ergelo

24-12-2009 01:07

Iemand nog een suggestie?

Vincent Huisman

24-12-2009 09:02

Tamara schreef op 16.12.2009 08:48
ik denk dat je met getimagesize() moet werken...

ik denk ook dat dat het antwoord op jouw vraag is

Tamara

24-12-2009 09:36

Probeer het anders met Photoshop, mbv een batch. dit kan echter alleen lokaal.

Jens erd

24-12-2009 09:40

Gebruik idd getimagesize, chek of de afbeelding groter is als 500x500 en gooi dan in de <img> tag de width erbij :-)

Pepijn

24-12-2009 10:50


<?php

list ($breedte, $hoogte, $image_type) = getimagesize($foto_naam);
if($hoogte > 500 | $breedte > 500) {
	//resize de image
}

?>

Reageren

Inloggen om te reageren