Image Resize problems on IE

[Aries7]

I posted this on another forum a while back...and they were unable to help, so i thought i would try it here...

I am working on a site here, and have encountered the following issue.


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><img width="100%" src="XXXX"/></td>
<td width="25%"><img width="100%" src="XXXX"/></td>
<td width="25%"><img width="100%" src="XXXX"/></td>
<td width="25%"><img width="100%" src="XXXX"/></td>
</tr>
</table>


On Firefox the images resize themselves to fit in the page wide table, and will dynamically resize as the window is resized. On IE though the images appear actual size and do not resize unless the window gets bigger than their actual size. Does anyone know what the problem is, and how to fix it?

I've never noticed this before.
See http://www.wickham43.supanet.com/fo...idths-test.html
where I've put three versions up online.

The only one that keeps Firefox showing full width and full height is
<table width="100%" border="0" cellspacing="0"

cellpadding="0">
<tr>
<td width="25%"><img src="raindroplets.jpg"/></td>
<td width="25%"><img src="raindroplets.jpg"/></td>
<td width="25%"><img src="raindroplets.jpg"/></td>
<td width="25%"><img src="raindroplets.jpg"/></td>
</tr>
</table>

http://masteraries7.brinkster.net/index.html

that is the URL of my current test version.

Firefox is resizeing them like i want it too, but IE doesnt seem to want to make them smaller than their actual size unless i say i want them Xpx wide or high.

I just realised it wasn't Firefox you were concerned about, but you want IE to resize them.

Since images have a fixed size IE will always display that size unless you code another fixed width, and it adjusts height to suit, as you say.

I've never heard that IE can adjust flexibly to screen size. Maybe javascript can do it. It just shows how much better Firefox is.

LOL, was hoping i wouldnt have to resort to JS, but I may have to. Thanks for the input, i will wait around and see if there are any other ideas before i jump off that cliff.

I've just found this re IE dynamic image resizing:-
http://www.siteexperts.com/tips/elements/ts21/page1.asp
It's obviously very old, referring to IE4 and Netscape but the zoom principle might still work.

That just might work, with some tweaking...thanks, this will be a great help.

This is probably the ultimate solution:-
http://www.webreference.com/program...ages/index.html
http://www.webreference.com/program...t/images/2.html

I haven't tried it.

Alright i THINK i have it working. But i am using IE7 Beta 2 on my laptop to rest it. It doesnt appear to be working on IE6. But i am not sure how it is set up on the computer i am sitting at.

So could someone please go to...

http://masteraries7.brinkster.net/index.html

and tell me if the images are resizing on their IE? And if not does anyone have any idea why it would work on IE7 but not IE6?

EDIT: I was thinking that perhaps Brinkster doesnt allow external .js files, but i tried it offline off my USB, and still nothing. perhaps i am just handling something not quite right, lol.

IE6 still full size images; Firefox still resizing smaller.

hmmm, that is what i was afraid of.

I wonder why it works on IE7, but not IE6...

Here is the entirety of my script...

// JavaScript Document

// resizeHeaderImages makes calls to the sizeTo() function

function resizeHeaderImages(){
if(navigator.userAgent.indexOf('MSIE') != -1){
var width = document.body.clientWidth / 4;
var percentage = width/640;
var height = 480 * percentage;
document.image1.width = width;
document.image1.height = height;
document.image2.width = width;
document.image2.height = height;
document.image3.width = width;
document.image3.height = height;
document.image4.width = width;
document.image4.height = height;
}
}



I think that even when IE resizes the image, it will only resize the width causing the image to distort. You could use a script to sniff the screen resolution and serve the apropriate sized images but of course screen resolution isn't browser size so you will have to hope they don't have to many panels and toolbars open and that the browser is maximised. In reality, you're probably going to have to accept that sometime the images will be cropped slightly to fit the page.

well at the moment i have the script finding the browser size, and resizing them in proportion to that. But for some reason IE isnt resizing them at all. And i am just not sure why, lol.

Browser sizes does not exist in some versions. Only screen resolution. When you change the size of the browser window, the screen resolution stays the same. Try actually changing your display settings and see how it performs.

I hear what you are saying. But on IE6 it isnt reaizing at all, it is displaying the images at their true size, 640x480. I have this monitor set to 1152x864, and the images still come through as a line of 4 640x480 images. I made my screen res, higher and smaller, they remained 640x480.

Any other ideas?

And that was all i heard from them...any ideas here?

[Buzz]

Do it via CSS and ems.


img {
width: 24em;
height: 40em;
}


Now using Ctrl-+ will increase them in size. Or Ctrl--(minus) will reduce them.

In order to really be of assistance you need to state WHY you want them to dynamically resize.

[Aries7]

I have a subheader made up of 4 images, that i need to resize to be the width of the page. So that they continue to be the subheader on new computers and old. Plus I am trying to improve an existing website without overly changing its design. Since my boss likes the old design. The problem is, that webpage was written 8 years ago, and was hardcoded to be viewed in 640x480. So on modern comps with resolutions of 1024x768+ that page takes up a remote corner of the browser and doesnt look very professional. So i have been trying to make it dynamically take up the entire page no matter how large it is.

If you view the page i linked in that post, with firefox, you will see how i entend it to look, and then view it in IE6 and you will see the way i DONT want it to look.

[rockboy]

Another consideration is page size and load time. Your 4 images total about 270k. My suggestion is to resize the images to a workable size. Make the total combined width about 980px (for 1024 resolution) or 780px (for 800 resolution). Use the actual image height and width in your code. You can at least control the image quality with a fixed size. If you center the content it'll look fine.

[Wickham]

I'm sorry you're still having problems.
The original thread was at
http://www.webdevforums.com/showthread.php?t=16520&highlight=ultimate
and Rincewind is better qualified than me but he seems to have given up.

Buzz suggested using ems; these will adjust an image relative to TEXT size if someone adjusts it on their computer (and if the font size is ems or relative like medium but not if px or pt in IE), but won't adjust image sizes relative to the screen or window resolution so that is no good. See
http://www.wickham43.supanet.com/tutorial/ems.html item 3 for use of ems with an image.

As rockboy says; you are left with one option to select sensible fixed sizes and fix the width of the page to say 780px or 980px and centralise it
OR use javascript to sniff the screen resolution and set image width and height accordingly but even that won't cope with someone who has reduced the window size (perhaps having a screen resolution of 1680*1200 but using two 800px windows side by side).

[Aries7]

Wow, I am impressed that you recognized the post, lol.

Its a problem that i havent really had time to worry about for a while. But i thought i would keep the question out there hoping to be able to get it working when i have time to get back to it.

Thanks for any answers yall can come up with

[Wickham]

Wow, I am impressed! I thought as the last post was in January that maybe you wouldn't be looking here for ages.

I was googling and found this link to my website example where I couldn't get IE to adjust the images to a different window size although Firefox did.

It has to need javascript I think.