Yes it possible in JavaScript. There are two cases, both with same aspect
ratio (aspect ratio = width / height or height / width). First, image should
not be clipped, and resized to fit predefined rectangle. In this case, image
is shown entirely. Second case (I’m guessing that’s the case you’re working
on) is simply fitting and clipping together, so image can fit (partially) to
predefined rectangle. Apart from that, there are some script related tricks
you have to apply, but don’t worry I prepared fully working example (example
supports both cases, please read comments to find out what needs to be
changed):
-- begin aspx code --
<script type="text/javascript">
//<!--
function ResizeImage(img, maxWidth, maxHeight)
{
if (!img)
return;
var height = img.height;
var width = img.width;
// exit if image fits the allowed rect
if ((height <= maxHeight) && (width <= maxWidth))
return;
var ratio = width / height;
// for non clipping resizing (first case) change it to:
// if (height >= width)
if (height <= width)
{
height = maxHeight;
width = parseInt(maxHeight * ratio);
}
else
{
height = parseInt(maxWidth / ratio);
width = maxWidth;
}
// remove these two lines if you want to use first case resizing (non
clipping)
img.style.left = parseInt((maxWidth - width) / 2) + 'px';
img.style.top = parseInt((maxHeight - height) / 2) + 'px';
img.style.width = width.toString() + 'px';
img.style.height = height.toString() + 'px';
}
//-->
</script>
<!--i used div with hidden overflow to avoid resizing effect while image is
loaded -->
<div style="width: 100px; height: 100px; overflow:hidden">
<asp:ImageButton runat="server" ID="imageButton" BorderWidth="0"
Style="position:relative;"/>
</div>
<script type="text/javascript">
// this trick is to make sure onload event is fired (if i used onload
attribute,
// it wouldn't work if image is cached on client's machine)
var <%=imageButton.ClientID %>_image =
document.getElementById('<%=imageButton.ClientID %>');
<%=imageButton.ClientID %>_image.onload = function() {
ResizeImage(<%=imageButton.ClientID %>_image, 100, 100);
}
// it doesn't work with some binary providers
<%=imageButton.ClientID %>_image.src = '2.jpg';
</script>
some very interesting content that won't be moved when image is loading
-- end aspx code --
Hope this helps
Milosz
same aspect ratio = proportional old size.