Setting the max-width and max-height for images

I have developed a forum. User are able to insert HTML tags directly. So user can paste a code like:

<img src="http://www.website.com/big_image.jpg" />

But I want to limit the max image size automatically, so it will not stretch out the fixed forum length if the image is larger, is that possible?

I have tried to use CSS

.container img {
    max-width:500px;
    max-height:500px;
}

but it seems like not working at  all.

The image is not uploaded, so I can resize the image using PHP. Thank you.
santockiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

B_DorseyCommented:
you could probably do it with javascript that onload loop through all the img tags and get the width, and if its greater then the max width you can resize it.
0
santockiAuthor Commented:
revising the last sentence, the correct phrase is

"The image is not uploaded, so I CAN NOT resize the image using PHP. Thank you."

If you have the solution in javascript, please let me know, thank you.


0
santockiAuthor Commented:
Or better, if you have for the PHP samples, that is fine too.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

B_DorseyCommented:
I wouldnt recommend by PHP cause you will have to find the width and height, i you are just looking for a rewrite of the html it wouldnt find it, if the user just left width and height empty and jsut let it be the default size.
0
B_DorseyCommented:
Also if you did it by php (image resize script, display images with php instead of a img call) then what stops this

<img src="/my/php/image/server/sample.php?img=sample.jpg" width="1200" height="1400">
0
hieloCommented:
>>I have tried to use CSS...but it seems like not working at  all.
That's IE being IE. I tried your CSS on FF and it works. At any rate, maybe you will find this useful.
http://www.gunlaug.no/contents/wd_additions_14.html
0
hieloCommented:
Javascript solution. See comments in code.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>	
<script type="text/javascript"><!--
 
window.onload = limitImages;
function setLimit(imgElem,prop,lim)
{
	for(var i=0,limit=document.images.length; i < limit; ++i)
	{
		if(imgElem==document.images[i])
		{
			if( lim < document.images[i][prop] )
			{
				imgElem[prop]=lim;
			}
			break;
		}
	}
}
function limitImages()
{
	var widthLimit=50;
	var heightLimit=50;
	var imgs = document.getElementsByTagName("img");
 
	for( var i=0, limit=imgs.length; i < limit; ++i)
	{
		if( -1 < imgs[i].parentNode.className.indexOf("container") )
		{
			setLimit(imgs[i],"width",50);
			setLimit(imgs[i],"height",50);
		}
	}
}
//--></script>
	
 
</head>
<body>
<!-- correct usage: the parent of img has a "container" class -->
<div class="container"><img src="http://www.cssnz.org/flower.jpg" alt=""></div>
<div class="container"><img src="http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg" alt=""></div>
 
<!-- incorrect usage: the parent of the img tags is a div without a "container" class  -->
<p  class="container">
	<div>
		<img src="http://www.cssnz.org/flower.jpg" alt="">
		<img src="http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg" alt="">
	</div>
</p>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.