Liquid Width Image Problem In IE, URGENT!!!

p11 · 12-30-2006, 10: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, 01: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, 07:02 AM

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

JFS · 01-02-2007, 11:42 AM

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:

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-05-2007, 11:11 PM

While the PHP solution would work when the page is first loaded, it wouldn't work if the page is resized after loading.

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, 10:33 PM	#1 (permalink)
p11 First Time Poster! Join Date: Dec 2006 Posts: 1 0.00 NP$ (Donate)	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, 01:38 AM	#2 (permalink)
beaver6813 NamePros Regular Join Date: May 2005 Location: England Posts: 349 65.50 NP$ (Donate)	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 V5 Soon!

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

01-02-2007, 11:42 AM	#4 (permalink)
JFS NamePros Regular Join Date: Oct 2005 Location: Portugal Posts: 760 56.85 NP$ (Donate)	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: 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 Selling : 19P.ORG - ARCADEHITS.ORG - AZIAN.NET - COREFANS.COM - CTUTORIALS.NET - DEDISEEK.COM - HITCHECK.COM - HOST15.COM - HOSTCUSTOMER.COM - LARGETIPS.COM - SCRIPTCANDY.COM - VISUALBOOK.NET - VOXVPS.COM / .NET - WALLPAPERSARENA.COM

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