Control image size

not bigger than specified size

[newbies]

Hello,

I place user submitted image url in a table to display the image (perl generated html page). My table width is 200. I want to display the image as it is if it is below 200X60, if not, the image will be displayed as 200x60. How can I write the html code for this? I can not use the img tag with "width=200 height=60" because it will distort the image if it is smaller than that.

Your input is greatly appreciated.

Newbies

[DrDoc]

You would have to use a server side solution to do that, or, you can always access the image size once the image has loaded, and then resize the image if it is too big. However, that is kinda buggy in IE.

[incywincy]

hi newbies,

i use the following algorithm to resize an image whilst maintaining the aspect ratio, :

$ActualWidth = $ImageDetails[0];
$ActualHeight = $ImageDetails[1];
$AspectRatio = $ActualWidth / $ActualHeight;

$NewImageWidth = $MaxImageWidth;
$NewHeight = $NewImageWidth / $AspectRatio;

If ($NewHeight > $MaxImageHeight)
{
$NewHeight = $MaxImageHeight;
$NewImageWidth = $NewHeight * $AspectRatio;
}

for your example MaxImageWidth and MaxImageHeight would be set to 200 and 60 before calling this function

[newbies]

Hi incywincy,

Thank you for reply.

How can I get the image dimensions (the $ImageDetails variable) from a image URL?

Newbies

[DrDoc]

You can only get that if the page is parsed by PHP/Perl or similar. Are your pages dynamic or static?

[incywincy]

newbies take a look at [phpfreaks.com ]

[alexhudson]

You can do this with CSS, so you don't need to do anything dynamic. However, it's not hugely cross-platform. For example, to constrain the width of images:

img { 
   /* for normal browsers */ 
   max-width: 200px;  
   /* for internet explorer */ 
   width: expression(this.width>200? "200px" : "auto"); 
}

I'm sure you get the idea. It's a complete hack, though... and wouldn't behave nicely with respect to aspect ratio (although, I would imagine that might not be a problem given the extreme 4:1 or so ratio of the box).

[DrDoc]

expression

s are IE proprietary and not valid CSS

[alexhudson]

This much is true, hence "not hugely cross-platform" and "complete hack". At the risk of taking this off-topic, there are some CSS hacks I would countenance and some I would not. Things I would not would include browser-version hacks like low/high/mid-pass filters, star-selectors, etc.

Stuff I potentially would includes the above. The reason why is because it's an attempt at backwards-compatibility without risking forwards-compatibility. Like having non-standard attributes, it's not a standardised thing but it is within the grammar of the standard.

You could have a specialised IE stylesheet, and include it with IE conditional comments: those are another example of something outside of the standard, but doesn't conflict with the standard. If it allows you to write a reasonably standards-compliant site without IE breaking up hugely, I'm all for it.

You can say the same thing about the IE ActiveX stuff to make PNG transparency work: it's non-standard CSS. However, it also brings IE's capabilities up to those of reasonable browsers, and allows you to create effects which would traditionally require worse hacks.

My answer is the only one which works if the poster requires a solution to work in a non-dynamic scenario. If you didn't want to resize the picture to fit, you could probably do it by setting up a floating div with the picture as a backdrop and an overflow crop. Personally, I think that's a worse hack.

[DrDoc]

I completely agree, alexhudson. And don't take me wrong -- I just wanted to emphasize what you had already stated, about it not being 100% cross-browser compatible... which is why you're using max-width in the first place, to give something to snack on for browsers that are compliant.

[alexhudson]

DrDoc, you're right, I probably should have stated it more clearly :)

It's a shame there isn't something like this in the standard though: countless times I've wanted to specify a height of 100%-30px or something, even just basic support would be fairly cool and would solve a lot of peoples' CSS layout problems...

[DrDoc]

specify a height of 100%-30px

It's coming, it's coming ;)

[divaone]

i may be off here, but wouldn't it be just as easy to work the server once... denying image uploads that do not meet the size requirements instead of resizing images with each call?

[DrDoc]

...or resize the image when it is uploaded, if any side is wider than allowed