By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,549 Members | 867 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,549 IT Pros & Developers. It's quick & easy.

image buttons

P: n/a
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

Feb 7 '07 #1
Share this Question
Share on Google+
9 Replies

P: n/a
No. To avoid stretching you would have to resize the image proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.
--

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

Feb 8 '07 #2

P: n/a
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



Feb 8 '07 #3

P: n/a
Looks pretty good. I am going to play with this today.

Is there a way to make sure the width and heights are proportional to the
old sizes? For example: give it a new height and have the width
automatically calculated based on the old proportions?

Thanks,

Tom

"Milosz Skalecki [MCAD]" <mi*****@DONTLIKESPAMwp.plwrote in message
news:11**********************************@microsof t.com...
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



Feb 8 '07 #4

P: n/a

"Mark Fitzpatrick" <ma******@fitzme.comwrote in message
news:OP**************@TK2MSFTNGP03.phx.gbl...
No. To avoid stretching you would have to resize the image proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.
How do you figure out the the proportional sizes are?

Thanks,

Tom
>

--

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


Feb 8 '07 #5

P: n/a
Howdy,

Read it again :) same aspect ratio = proportional old size.
--
Milosz
"tshad" wrote:
Looks pretty good. I am going to play with this today.

Is there a way to make sure the width and heights are proportional to the
old sizes? For example: give it a new height and have the width
automatically calculated based on the old proportions?

Thanks,

Tom

"Milosz Skalecki [MCAD]" <mi*****@DONTLIKESPAMwp.plwrote in message
news:11**********************************@microsof t.com...
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



Feb 8 '07 #6

P: n/a
Hi there,

Simple formula:

R = w\h

where: R - aspect ratio, h - original image height, w - original image
width, In addition to that let's introduce Wmax - constraining (maximum)
width, Hmax - constraining maximum height.

if you use height as referential size:
newHeight = Hmax
newWidth = Hmax * R

if you use width as referential size:
newHeight = Wmax / R
newWidth = Wmax

--
Milosz
"tshad" wrote:
>
"Mark Fitzpatrick" <ma******@fitzme.comwrote in message
news:OP**************@TK2MSFTNGP03.phx.gbl...
No. To avoid stretching you would have to resize the image proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.

How do you figure out the the proportional sizes are?

Thanks,

Tom


--

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


Feb 8 '07 #7

P: n/a
"Mark Fitzpatrick" <ma******@fitzme.comwrote in message
news:OP**************@TK2MSFTNGP03.phx.gbl...
No. To avoid stretching you would have to resize the image proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.
I tried that but I can't seem to get the oThumbnail.Save to work. I get the
following error:

System.Runtime.InteropServices.ExternalException: A generic error occurred
in GDI+.

theFileName = New FileInfo(strFileName)
fileOut = fileIn.Substring(0,fileIn.LastIndexOf(".")) &
session("User").CompanyID & fileIn.Substring(fileIn.LastIndexOf("."))
pathFileOut = Server.MapPath("\Uploads") & "\" &
fileIn.Substring(0,fileIn.LastIndexOf(".")) & "Temp" &
fileIn.Substring(fileIn.LastIndexOf("."))
MyFile2.PostedFile.SaveAs(PathFileOut)

' Write out a temporary file that will be read back in for thumbnail
Dim oImage As System.Drawing.Image
oImage = oImage.FromFile(pathFileOut)

' Read back in File, create thumbnail and save it
Dim oThumbnail as System.Drawing.Image
oThumbnail = oImage.GetThumbnailImage(100,200,Nothing,Nothing)
thumbnailFileOut = Server.MapPath("\Uploads") & "\" &
fileIn.Substring(0,fileIn.LastIndexOf(".")) &
fileIn.Substring(fileIn.LastIndexOf("."))
oThumbnail.Save(Server.MapPath("uploads") & "\" & fileOut,
ImageFormat.Jpeg)

I am getting the error on the last line.

The path and filename are valid. It is the same as when I saved the
original file (MyFile2.PostedFile.SaveAs(PathFileOut)).

Thanks,

Tom
>
--

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


Feb 8 '07 #8

P: n/a
"tshad" <t@home.comwrote in message
news:eQ**************@TK2MSFTNGP03.phx.gbl...
"Mark Fitzpatrick" <ma******@fitzme.comwrote in message
news:OP**************@TK2MSFTNGP03.phx.gbl...
>No. To avoid stretching you would have to resize the image proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.

I tried that but I can't seem to get the oThumbnail.Save to work. I get
the following error:

System.Runtime.InteropServices.ExternalException: A generic error occurred
in GDI+.

theFileName = New FileInfo(strFileName)
fileOut = fileIn.Substring(0,fileIn.LastIndexOf(".")) &
session("User").CompanyID & fileIn.Substring(fileIn.LastIndexOf("."))
pathFileOut = Server.MapPath("\Uploads") & "\" &
fileIn.Substring(0,fileIn.LastIndexOf(".")) & "Temp" &
fileIn.Substring(fileIn.LastIndexOf("."))
MyFile2.PostedFile.SaveAs(PathFileOut)

' Write out a temporary file that will be read back in for thumbnail
Dim oImage As System.Drawing.Image
oImage = oImage.FromFile(pathFileOut)

' Read back in File, create thumbnail and save it
Dim oThumbnail as System.Drawing.Image
oThumbnail = oImage.GetThumbnailImage(100,200,Nothing,Nothing)
thumbnailFileOut = Server.MapPath("\Uploads") & "\" &
fileIn.Substring(0,fileIn.LastIndexOf(".")) &
fileIn.Substring(fileIn.LastIndexOf("."))
oThumbnail.Save(Server.MapPath("uploads") & "\" & fileOut,
ImageFormat.Jpeg)

I am getting the error on the last line.
Someone pointed out the problem with this one. The last line should be:

oThumbnail.Save(thumbnailFileOut ,ImageFormat.Jpeg)

I missed that from all my changing code to try to get it to work.

Thanks,

Tom
>
The path and filename are valid. It is the same as when I saved the
original file (MyFile2.PostedFile.SaveAs(PathFileOut)).

Thanks,

Tom
>>
--

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



Feb 8 '07 #9

P: n/a
Worked great.

It turns out that if you are going to use width as the referential size you
need to change the Ration formula to: R = h\w.

Thanks,

Tom

"Milosz Skalecki [MCAD]" <mi*****@DONTLIKESPAMwp.plwrote in message
news:2F**********************************@microsof t.com...
Hi there,

Simple formula:

R = w\h

where: R - aspect ratio, h - original image height, w - original image
width, In addition to that let's introduce Wmax - constraining (maximum)
width, Hmax - constraining maximum height.

if you use height as referential size:
newHeight = Hmax
newWidth = Hmax * R

if you use width as referential size:
newHeight = Wmax / R
newWidth = Wmax

--
Milosz
"tshad" wrote:
>>
"Mark Fitzpatrick" <ma******@fitzme.comwrote in message
news:OP**************@TK2MSFTNGP03.phx.gbl...
No. To avoid stretching you would have to resize the image
proportionally
through code. In other words, open the image through the System.Drawing
classes and check the width and height and then setting the
image/imagebutton's width and height to be a new height and width
proportional to the old. HTML doesn't make any allowances for doing
proportional changes itself or for percentage dimensions.

How do you figure out the the proportional sizes are?

Thanks,

Tom
>

--

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





Feb 9 '07 #10

This discussion thread is closed

Replies have been disabled for this discussion.