Eric Bergman-Terrell's Blog

Smooth Graphical Image Scaling in Internet Explorer 7
September 16, 2007

The Photo Program uses Internet Explorer to display and scale images. By default the images are scaled unattractively. But Internet Explorer 7 offers much more attractive scaling when you specify the "-ms-interpolation-mode:bicubic" style in the IMG tag.

IfThe Photo Program were written in C#, I would not have delegated graphics rendering to an Internet Explorer browser window. But in the C++ world, at least when I wrote that program, there was no built-in JPEG rendering available.

The attractive scaling comes at a price, the scaling takes a bit longer. But for photographs, it's well worth the cost. If you're just displaying static JPEGs on a website, don't scale them, just upload them to your server at the correct resolution, and rely on your image editing program to do the scaling.

Here's the JavaScript and HTML thatThe Photo Program uses to scale images. Look for the bicubic interpolation mode specified in the IMG tag:

<HTML>
<HEAD>
<TITLE>Landscape</TITLE>
</HEAD>
<STYLE>
body { margin: 0 0; }
</STYLE>
<SCRIPT>
var ScaleMode = 0; var OriginalWidth = null, OriginalHeight = null;

function ShrinkToFit()
{
if (OriginalWidth == null || OriginalHeight == null)
{
document.body.style.display = "block";
Picture.style.display       = "block";

OriginalWidth  = Picture.width;
OriginalHeight = Picture.height;
}

var ClientWidth  = document.body.clientWidth;
var ClientHeight = document.body.clientHeight;

var WidthRatio  = OriginalWidth  / ClientWidth;
var HeightRatio = OriginalHeight / ClientHeight;

var Ratio = WidthRatio > HeightRatio ? WidthRatio : HeightRatio;

var ScaledWidth  = OriginalWidth  / Ratio;
var ScaledHeight = OriginalHeight / Ratio;

switch(ScaleMode)
{
case 0:
{
if (OriginalWidth > ScaledWidth || OriginalHeight > ScaledHeight)
{
Picture.width  = ScaledWidth;
Picture.height = ScaledHeight;
}
}
break;

case 1:
{
Picture.width  = ScaledWidth;
Picture.height = ScaledHeight;
}
break;

case 2:
{
Picture.width  = OriginalWidth;
Picture.height = OriginalHeight;
}
break;
}
}

function window.onbeforeprint()
{
Picture.width  = OriginalWidth;
Picture.height = OriginalHeight;
}

function window.onafterprint()
{
OriginalWidth  = null;
OriginalHeight = null;

ShrinkToFit();
}
</SCRIPT>

<BODY STYLE="display:none" onload="ShrinkToFit();" onresize="ShrinkToFit();">
<P>
<IMG STYLE="display:none;-ms-interpolation-mode:bicubic" 
ID="Picture"onload="ShrinkToFit();"
SRC="..." ALT="Landscape"/>
</P>

</BODY>
</HTML>
Keywords: Internet Explorer, graphics, image scaling, IMG

Reader Comments

Comment on this Blog Post

Recent Posts

TitleDate
Node.js + Express: How to Block Requests by User-Agent HeadersJanuary 7, 2026
Vault 3 is Now Available for Windows on ARM Machines!December 13, 2025
Vault 3: How to Include Outline Text in Exported PhotosOctober 26, 2025
.NET Public-Key (Asymmetric) Cryptography DemoJuly 20, 2025
Raspberry Pi 3B+ Photo FrameJune 17, 2025
EBTCalc (Android) Version 1.53 is now availableMay 19, 2024
Vault 3 Security EnhancementsOctober 24, 2023