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
--
Hope this helps,
Mark Fitzpatrick
Former Microsoft FrontPage MVP 199?-2006
"tshad" <t@home.comwrote in message
news:uB**************@TK2MSFTNGP05.phx.gbl...
Is there a way to display images (imageButtons or linkbuttons for
instance) as a max size (200px by 50px) and not have it stretch the image?
What I want to be able to do is limit the real estate an image can take up
but not stretch the image if it happens to be 150px by 40.
I am doing commands such as:
<asp:ImageButton ID="CompanyLogo" onClick="Image_Click" Width="200px"
Height="50px" runat="server"/>
Thanks,
Tom
