CSS img-resize Problems

Josh-

<style>
.img-resize 
{ 
position: relative; 
width: 10%;
height: 10%;
} 
</style>

I am not understanding how it resizes the image. It's been bugging at me for a while, since I like to have things be perfect. It's for a picture gallery, coded in PHP, and backed by a mySQL database. Pretty much created from scratch, with some reference. Although, this image resizing thing is making me get a large headache, literally speaking.

If the image was 400x100, then the area of the image would be 40,000. (I believe) 10% of 40,000 is 4,000. But, instead, (remember this is an example), it would resize it to about 8,000, or so. I am totally confused about this. Hopefully one of you understand, since I said this rather illiterately.

Thanks for any help that you may be possible to give.
-J

Josh-

Hm..oddly the code didnt appear.
Here it is without the <style></style> tags.

.img-resize 
{ 
position: relative; 
width: 10%;
height: 10%;
} 

Park_7677

Set it to 100% and see what's taking place

How to do it right?.. I don't know Maybe Google for it. Good luck

Josh-

When set to 100%, it seems to make it much larger then it should be. I'm trying to accomplish something like a thumbnail image, because the photo gallery that the site is made for may have about 25 photos on it, or more.

Park_7677

Well what happens when I set it to 100%, it takes 100% of the viewable screen.

That's what I meant by "see what's taking place" -- the %s aren't based on the images, but the browser window size.

Josh-

Any suggestions on how to get them based on image size? Rather then the window size. Maybe confining the images into a table would help solve the problem. What are your thoughts on it?
-J

Kwitko

You're making the width of the picture relative to the container it's enclosed in. In your case it's the page. Constrain it within a DIV or the cells of a table.

Josh-

I'll try it, its only that when I wrote up the php I made it to work in loops, querying and writing from the database. I'm sure I can find a way around it, or to make it work, probably.

Kwitko

May I see your script?

Josh-

I can try to get it up in this thread in a bit, maybe tomorrow. I'm not on my computer that has access to it. It basically inputs data into the mySQL database, with a simple form. Then, on different page, it selects the last 25 things that were entered into the database. The way that they are displayed though, are in a loop, similar to:
[php]
<!--START OF HTML-->
<p align="center">
<? echo $name ?><br>
<a href="<? echo $message ?>"><img src="<? echo $message ?>" class="img-resize" border="0"></a><br>
</p>
<? } ?>
[/php]
It uses something similar to that, I'm not positive it is that, word for word, but its close. I am going to attempt to make a table, 5 rows 5 columns, that would create 25 spaces, I assume. Perhaps then the different tables can confine the images and the titles of the image to that table, not extending or making the rows or columns larger then they should be. Hopefully, this works, as I don't want to start re-doing things majorly.
-J

Josh-

Furthermore, the $message area would include path to the image, or photograph, that I want displayed. The $name area defines the title of the image.

Park_7677

This would work perfect:
What it does is gets the size of the image via PHP, then cuts them down to 10%. Then just ECHOs out the new dimensions! Feel free to shoot me questions.

[PHP]

<?php

$img_size = getimagesize($message);

$width = $img_size[0] * 0.1 //10% of original size
$height = $img_size[1] * 0.1 //10% of original size

?>
<!--START OF HTML-->
<p align="center">
<? echo $name ?>
<a href="<? echo $message ?>"><img src="<? echo $message .'" width="'. $width .'" height="'. $height .'"'; ?> border="0"></a>
</p>
<? } ?>

[/PHP]

More on getimagesize function.

Kwitko

Scripts like that make remind me why I love heredoc so much.

[php]
<?
$img_size = getimagesize($message);

$width = $img_size[0] * 0.1; //10% of original size
$height = $img_size[1] * 0.1; //10% of original size
print <<< EOL
<div align="center">
$name<br />
<a href="$message"><img src="$message"width="$width" height="$height" border="0" alt="$named" /></a>
</div>
EOL;
?>
[/php]

Park_7677

Josh -- both of the code snips do the same thing.. except Seth's has a typo I made in mine at first (later corrected it)...



$height = $img_size[0] * 0.1; //10% of original size

should be

$height = $img_sizeb]1[/b * 0.1; //10% of original size



Enjoy

- Park

Kwitko

That getimagesize function is pretty cool. Have you seen what else is listed in the array?

[php]
Array
(
[0] => 640
[1] => 412
[2] => 2
[3] => width="640" height="412"
[bits] => 8
[channels] => 3
[mime] => image/jpeg
)
[/php]

I think [2] is the file type. 1 = gif, 2 = jpg.

Josh-

Well, thanks for the help.

I'm busy and have to leave at the moment, but I will try them later and tell you the results.
-J