Setting the max-width and max-height for images using PHP

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

<img src="" />

sometimes it has the width and height attribute

<img src="" width="1000" />

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?

What I want to do is:

1. if the "width" is already set but it's greater than the max permitted like 500px, then change it to 500px

2. If it does not have the width, then just add the width

3. It should not slow down the speed by loading the remote image file remotely using php functions to find out the width

Thank you.
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.

>>if the "width" is already set but it's greater than the max permitted like 500px, then change it to 500px
Even when the html code does NOT specify the img width and height explicitly EX:
<img src="test.gif">

the browse will detec/computt the img size automatically and set its size. So, technically speaking, this statement:
"If it does not have the width, then just add the width"
will always be false because the browser will assign a value to it if you did not supply one.

The script below adjusts the size dynamically on the browser, so point #3 is met with no problem.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<script type="text/javascript"><!--
window.onload = limitImages;
function setLimit(imgElem,prop,lim)
	for(var i=0,limit=document.images.length; i < limit; ++i)
			if( lim < document.images[i][prop] )
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") )
<!-- correct usage: the parent of img has a "container" class -->
<div class="container"><img src="" alt=""></div>
<div class="container"><img src="" alt=""></div>
<!-- incorrect usage: the parent of the img tags is a div without a "container" class  -->
<p  class="container">
		<img src="" alt="">
		<img src="" alt="">

Open in new window

add this css:
img {
max-width: 500px !important;
max-height: 500px !important;

Open in new window


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.