• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2140
  • Last Modified:

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="http://www.website.com/big_image.jpg" />

sometimes it has the width and height attribute

<img src="http://www.website.com/big_image.jpg" 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.
1 Solution
>>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="http://www.w3.org/1999/xhtml">
<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="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">
		<img src="http://www.cssnz.org/flower.jpg" alt="">
		<img src="http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg" alt="">

Open in new window

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

Open in new window


Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now