I want to fit images on my site to the size of their containing element, so I have this:

if (userHasMicrositePhoto) {
    var width = $('micrositePhotoDiv').getComputedSize().width;
    $('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}

My handler file userImage.ashx returns the image given by the ID, scaled to the width given as a parameter.

This works fine in firefox, chrome & co, but doesn't work in Internet explorer - the image returned is too large. I think this is because .getComputedSize().width reports a width that includes the size of the padding (but on the border or margin) in Internet explorer, but returns only the usable area in other browsers. As a result, the width given by internet explorer is too large.

I can't find any other fields accessable for.getComputedSize() that allows me to find the 'actual' width in Internet Explorer. I tried using .getComputedStyle() to get the padding so I could subtract it from the total width, but this returns a string, and I am styling the micrositePhotoDiv element as padding: 0.75em, so this doesn't work.

What do I need to do to get the right width in internet explorer?

I want to fit images on my site to the size of their containing element, so I have this:

if (userHasMicrositePhoto) {
    var width = $('micrositePhotoDiv').getComputedSize().width;
    $('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}

My handler file userImage.ashx returns the image given by the ID, scaled to the width given as a parameter.

This works fine in firefox, chrome & co, but doesn't work in Internet explorer - the image returned is too large. I think this is because .getComputedSize().width reports a width that includes the size of the padding (but on the border or margin) in Internet explorer, but returns only the usable area in other browsers. As a result, the width given by internet explorer is too large.

I can't find any other fields accessable for.getComputedSize() that allows me to find the 'actual' width in Internet Explorer. I tried using .getComputedStyle() to get the padding so I could subtract it from the total width, but this returns a string, and I am styling the micrositePhotoDiv element as padding: 0.75em, so this doesn't work.

What do I need to do to get the right width in internet explorer?

• javascript
• mootools

• still..no answer here to this riddle. – vsync Commented Mar 24, 2014 at 18:19

2 Answers 2

jQuery width() does just that (see jQuery source code).

As you saw, usually getComputedStyle returns the width in pixels, so you can often do (except on old IE):

var width = parseFloat(window.getComputedStyle(elem).width);

You can make the padding 0, but checking puted styles for sizes and positions is often buggy and hard to reconcile acreoss browsers.

Use offsetWidth or clientWidth instead, on all browsers.