Reply LinkBack Thread Tools Search this Thread
Old 10-01-2008, 18:18   #1 (permalink)
[NEMESIS]
Registered User
 
[NEMESIS]'s Avatar
 
Join Date: Dec 2006
Location: Samobor, Croatia
Posts: 26
Send a message via ICQ to [NEMESIS] Send a message via MSN to [NEMESIS] Send a message via Skype™ to [NEMESIS]
Proportional resize of max-height and max-width...

I have lots of images in different sizes. Some of them are too large and I want them to change their dimensions. So I've put:
Code:
img { max-width: 325px;}

So if the image is 500px wide, It will reduce it's width to 325px. However, that will not influence the height of the image. That is my problem. I want images to proportionally resize. How can I achieve that?
  Reply With Quote
Old 10-01-2008, 18:44   #2 (permalink)
Shiro
shiro
 
Shiro's Avatar
 
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 2,605
If you know any server side programming you could add some in so that it checks the dimensions of the image and outputs the appropriate height in the height area.
  Reply With Quote
Old 11-01-2008, 07:47   #3 (permalink)
[NEMESIS]
Registered User
 
[NEMESIS]'s Avatar
 
Join Date: Dec 2006
Location: Samobor, Croatia
Posts: 26
Send a message via ICQ to [NEMESIS] Send a message via MSN to [NEMESIS] Send a message via Skype™ to [NEMESIS]
Well, I can easily make PHP code but how to implement it in css file?
  Reply With Quote
Old 11-01-2008, 13:04   #4 (permalink)
Shiro
shiro
 
Shiro's Avatar
 
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 2,605
Write your style sheet as if it were a css sheet, adding in the php where you need it. Then save your sheet as .php
Finally link to that sheet as you would a normal css sheet, and just put src="some_file.php" instead of src="some_file.css".

Apparently that is. I've never done it, so I can't say for sure. But that's the word on the street.
  Reply With Quote
Old 11-01-2008, 13:58   #5 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,340
I think it would be better to dynamically output width and height attributes in the HTML than in a CSS file.

<img src="..." alt="..." width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
  Reply With Quote
Old 11-01-2008, 17:18   #6 (permalink)
[NEMESIS]
Registered User
 
[NEMESIS]'s Avatar
 
Join Date: Dec 2006
Location: Samobor, Croatia
Posts: 26
Send a message via ICQ to [NEMESIS] Send a message via MSN to [NEMESIS] Send a message via Skype™ to [NEMESIS]
Quote:
Originally Posted by pgo
I think it would be better to dynamically output width and height attributes in the HTML than in a CSS file.

<img src="..." alt="..." width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

No, that wouldn't work, I need this for wordpress theme on which I'm working on...
  Reply With Quote
Old 11-01-2008, 18:18   #7 (permalink)
datahound
Spare Parts
 
datahound's Avatar
 
Join Date: Jan 2005
Location: Bracknell Forest
Posts: 4,960
Can you ditch the avatar ffs? Then I might want to stay on one of your threads long enough to think about an answer.
__________________
  Reply With Quote
Old 11-01-2008, 18:38   #8 (permalink)
datahound
Spare Parts
 
datahound's Avatar
 
Join Date: Jan 2005
Location: Bracknell Forest
Posts: 4,960
PHP Code:
<?php 

function imageRestrict($image) { 

$maxwidth 150;

list(
$width,$height) = getimagesize($image);

if (
$width $maxwidth) {

$newheight $maxwidth/$width $height

return 
'<img src="'.$image.'" width="'.$maxwidth.'" height="'.$newheight.'">'



else{

return 
'<img src="'.$image.'" width="'.$width.'" height="'.$height.'">'

}



?>

Then where the system is either saving down our outputting the URL replace

<img src="mypic.jpg">

with

<?php $outputimage=imageRestrict('mypic.jpg'); echo"$outputimage"; ?>

Just rough idea. May need polishing. With a bit of thought you could do the maths and get a proportional height output.

edit: tested - that works now.

edit: the height calculates too.
__________________

Last edited by datahound : 11-01-2008 at 19:09.
  Reply With Quote
Old 12-01-2008, 16:06   #9 (permalink)
2Dfruit
Biscuit
 
2Dfruit's Avatar
 
Join Date: Jun 2006
Location: Ireland
Posts: 971
basically what you're doing is creating a thumbnail (a big one - same premise)

Article - How to create thumbnails with PHP and gd.
PHPit - Totally PHP » Image manipulation with PHP & the GD library, Part 2

all you need there
__________________
"Get out of my face!"
"NO! I'll get in your FACE!"
  Reply With Quote
Old 12-01-2008, 18:42   #10 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,340
Quote:
Originally Posted by [NEMESIS]
No, that wouldn't work, I need this for wordpress theme on which I'm working on...
Wordpress' theme engine uses raw PHP...or have they changed it since I used it?
  Reply With Quote
Old 16-01-2008, 11:50   #11 (permalink)
website-design
Best design is simple :-)
 
Join Date: Jan 2008
Posts: 42
wow avatar!
  Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive - Top
Search Engine Optimization by vBSEO 3.0.0 RC8