Liquid Width Image Problem In IE, URGENT!!!

p11 · Dec 31, 2006

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 · Dec 31, 2006

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 · Dec 31, 2006

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

JFS · Jan 2, 2007

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 · Jan 6, 2007

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.

Liquid Width Image Problem In IE, URGENT!!!

New Member

Established Member

VIP Member

VIP Member

New Member

SexHumanoid.xyz

domainsplenty.com

xnzAi.com

AffinityMedicine.com

QuickAndUseful.com

nrqAi.com

UbezpieczeniaRolne.pl

PigulkiAntykoncepcyjne.pl

CyanAgent.com

RobinsonsPlumbing.com

Similar threads

We're social

SexHumanoid.xyz

domainsplenty.com

xnzAi.com

AffinityMedicine.com

QuickAndUseful.com

nrqAi.com

UbezpieczeniaRolne.pl

PigulkiAntykoncepcyjne.pl

CyanAgent.com

RobinsonsPlumbing.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling