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

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.
0
santocki
Asked:
santocki
  • 3
  • 2
  • 2
1 Solution
 
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
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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