Liquid Width Image Problem In IE, URGENT!!!

p11 · 12-30-2006, 11:33 PM

Hey guys, my website is currently being developed by a programmer and I have a problem that neither I nor him can solve. My website has liquid width, however I would like the images inserted in articles to automatically adjust to the size of the screen regardless of its size. I don't want the images to get larger than their inserted size but I do want it to get smaller as the window size is reduced. My programmer has done this in Firefox, however he said that it is impossible to do in IE, so he left me with the option of not inserting images larger than 420px. I REALLY need someone's help ASAP.

Thank you!!!!

beaver6813 · 12-31-2006, 02:38 AM

Do you have an example of the site i can play around with? It seems that it will have to be done with percentage widths, but ill need something to test with.

jdk · 12-31-2006, 08:02 AM

Yes, please post some of your code you are having a problem with.

JFS · 01-02-2007, 12:42 PM

it's not impossivel on IE.
if you do it via php it's easy.~

to resise an image to a max of 700 pixels

Code:

$maxwidth = "700";
  $imagehw = GetImageSize($get_dir.$_REQUEST[id]);
  $realsize = round(FileSize($get_dir.$_REQUEST[id])/1024);
  $imagewidth = $imagehw[0];
  $imageheight = $imagehw[1];
  $realwidth = $imagewidth;
  $realheight= $imageheight;
  $imgorig = $imagewidth;
  if ($imagewidth > $maxwidth) {
    $imageprop=($maxwidth*100)/$imagewidth;
    $imagevsize= ($imageheight*$imageprop)/100 ;
    $imagewidth=$maxwidth;
    $imageheight=ceil($imagevsize);
  }

to call the image:
????: NamePros.com http://www.namepros.com/programming/275093-liquid-width-image-problem-ie-urgent.html

Code:

<img alt="" src="pathtoimage/image.jpg"  border ="0" width=".$imagewidth." height=".$imageheight." />

if you want to detect the screen resolution check here:
http://www.daniweb.com/code/snippet413.html

this is more than enough for your programmer to solve your problem.

plong0 · 01-06-2007, 12:11 AM

While the PHP solution would work when the page is first loaded, it wouldn't work if the page is resized after loading.
????: NamePros.com http://www.namepros.com/showthread.php?t=275093

The reason it can work in Firefox (and other W3C compliant browsers) is that they support the CSS attributes max-width, max-height, IE does not.

I have done it with a bit of JavaScript...

Insert in <head>, modifying where it says to set maximum dimensions

Code:

<script type="text/javascript">
var actW, actH, maxW = {}, maxH = {};

//SET THE MAXIMUM DIMENSIONS HERE
//use the ID of the element as the index
maxW['test'] = 400;
maxH['test'] = 400;

function initDimensions() {
  actW = {}; actH = {};
  for (var cID in maxW) {
    var cElem = document.getElementById(cID);
    actW[cID] = cElem.style.width;
    actH[cID] = cElem.style.height;
  }
  enforceDimensions();
}

function enforceDimensions() {
  for (var cID in maxW) {
    var cElem = document.getElementById(cID);
    cElem.style.width = actW[cID];
    cElem.style.height = actH[cID];
    if (cElem.width > maxW[cID]) cElem.style.width = maxW[cID];
    if (cElem.height > maxH[cID]) cElem.style.height = maxH[cID];
  }
}
</script>

register the trigger events

Code:

<body onload="initDimensions();" onresize="enforceDimensions();">

insert your image ...

Code:

<img id="test" src="test.jpg" style="width: 75%; height: 75%;" />

The "test" img in this code will stay 75% to maximum 400 width and height.

You may want to optimize it so that it only uses it when the browser doesn't support the max-width and max-height, and define those in your style instead.

12-30-2006, 11:33 PM	THREAD STARTER #1 (permalink)
p11 First Time Poster! Join Date: Dec 2006 Posts: 1	Liquid Width Image Problem In IE, URGENT!!! Hey guys, my website is currently being developed by a programmer and I have a problem that neither I nor him can solve. My website has liquid width, however I would like the images inserted in articles to automatically adjust to the size of the screen regardless of its size. I don't want the images to get larger than their inserted size but I do want it to get smaller as the window size is reduced. My programmer has done this in Firefox, however he said that it is impossible to do in IE, so he left me with the option of not inserting images larger than 420px. I REALLY need someone's help ASAP. Thank you!!!!

12-31-2006, 02:38 AM	#2 (permalink)
beaver6813 NamePros Regular Join Date: May 2005 Location: England Posts: 392 Follow @beaver6813	Do you have an example of the site i can play around with? It seems that it will have to be done with percentage widths, but ill need something to test with. __________________ -Beaver6813.com - Web Developer Extraordinaire!

12-31-2006, 08:02 AM	#3 (permalink)
jdk Senior Member Join Date: Jul 2004 Location: Florida Posts: 1,492	Yes, please post some of your code you are having a problem with. __________________ All offers are valid for 12 hours unless otherwise stated.

01-02-2007, 12:42 PM	#4 (permalink)
JFS NamePros Regular Join Date: Oct 2005 Location: Portugal Posts: 800	it's not impossivel on IE. if you do it via php it's easy.~ to resise an image to a max of 700 pixels Code: $maxwidth = "700"; $imagehw = GetImageSize($get_dir.$_REQUEST[id]); $realsize = round(FileSize($get_dir.$_REQUEST[id])/1024); $imagewidth = $imagehw[0]; $imageheight = $imagehw[1]; $realwidth = $imagewidth; $realheight= $imageheight; $imgorig = $imagewidth; if ($imagewidth > $maxwidth) { $imageprop=($maxwidth100)/$imagewidth; $imagevsize= ($imageheight$imageprop)/100 ; $imagewidth=$maxwidth; $imageheight=ceil($imagevsize); } to call the image: ????: NamePros.com http://www.namepros.com/programming/275093-liquid-width-image-problem-ie-urgent.html Code: <img alt="" src="pathtoimage/image.jpg" border ="0" width=".$imagewidth." height=".$imageheight." /> if you want to detect the screen resolution check here: http://www.daniweb.com/code/snippet413.html this is more than enough for your programmer to solve your problem. __________________ João Fernandes Silva

01-06-2007, 12:11 AM	#5 (permalink)
plong0 New Member Join Date: Jan 2007 Posts: 8	While the PHP solution would work when the page is first loaded, it wouldn't work if the page is resized after loading. ????: NamePros.com http://www.namepros.com/showthread.php?t=275093 The reason it can work in Firefox (and other W3C compliant browsers) is that they support the CSS attributes max-width, max-height, IE does not. I have done it with a bit of JavaScript... Insert in <head>, modifying where it says to set maximum dimensions Code: <script type="text/javascript"> var actW, actH, maxW = {}, maxH = {}; //SET THE MAXIMUM DIMENSIONS HERE //use the ID of the element as the index maxW['test'] = 400; maxH['test'] = 400; function initDimensions() { actW = {}; actH = {}; for (var cID in maxW) { var cElem = document.getElementById(cID); actW[cID] = cElem.style.width; actH[cID] = cElem.style.height; } enforceDimensions(); } function enforceDimensions() { for (var cID in maxW) { var cElem = document.getElementById(cID); cElem.style.width = actW[cID]; cElem.style.height = actH[cID]; if (cElem.width > maxW[cID]) cElem.style.width = maxW[cID]; if (cElem.height > maxH[cID]) cElem.style.height = maxH[cID]; } } </script> register the trigger events Code: <body onload="initDimensions();" onresize="enforceDimensions();"> insert your image ... Code: <img id="test" src="test.jpg" style="width: 75%; height: 75%;" /> The "test" img in this code will stay 75% to maximum 400 width and height. You may want to optimize it so that it only uses it when the browser doesn't support the max-width and max-height, and define those in your style instead.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)