PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
B

Image resizing.

Door Bram Ergelo op 15-12-2009 23:36
1.607 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>
?>
B
Bram Ergelo
24-12-2009 12:02
Pepijn schreef op 24.12.2009 10:50

<?php

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

?>


Als ik hem zo maak, en ik zet op //resize de image, 

<img src="...jpg" width="500px" height="500px" />


dan verschaalt hij hem dus totaal naar 500x500, en niet naar een grootte in verhouding.

mijn bedoeling is dat de afbeelding altijd in goede proporties blijft.
P
Pepijn
24-12-2009 13:06
Graag gedaan, alstublieft, dankuwel:

<?php

list ($breedte, $hoogte, $image_type) = getimagesize('afbeelding.gif');
if($hoogte > 500 | $breedte > 500) {
    //Eerst kijken welke de grootste is, breedte of hoogte:
    if($hoogte > $breedte) {
	    $factor = $hoogte / 500;
	    $hoogte = 500;
	    $breedte = $breedte/$factor;
    }
    else// breedte is dus gelijk aan de hoogte of groter dan de hoogte
    {
	    $factor = $breedte / 500;
	    $breedte = 500;
	    $hoogte = $hoogte/$factor;
    }
}

echo '<img src="afbeelding.gif" width="'.$breedte.'px" height="'.$hoogte.'px" />';

?>

Reageren

Inloggen om te reageren