I want an image in a tablecell to be scaled to fit the cell without distorting the image

[active]

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be smaller
than the cell.

Sometimes I'd expect to see the height fit the cell and the width be smaller
than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Eliyahu Goldin]

You can manipulate on images only on server side. Table resizing takes place
on client side. You can't really combine these two things well. Better find
a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

 

[active]

You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine these
two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Eliyahu Goldin]

You need to use GDI+ with System.Drawing namespace. It may not be as simple
as you would like.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine these
two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Patrice]

IMO you'll have to do this client side using JavaScript as you need to know
how the table cell is rendered. Basically it would be something like :
- once the document is loaded, get the size of the cell and set the image
properties accordingly to fit the appropriate dimension and to scale using
the same factor in the other direction to avoid distortion
- you may have to call this if the general layout is changed for example if
the user shrink the window and the table cell shrinks
- excessive scaling could result in a quality loss

You may want to consider other options depending on what exactly you are
trying to do...

---
Patrice

You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine these
two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[active]

<asp:TableCell runat="server" ID="TableCellR4C1" height="300"
BorderStyle="Groove">


<asp:Image ID="Image1" runat="server" AlternateText="My Image" Height="100%"

ImageUrl="~/Images/mydefault.jpg" Width="100%" /><br />

</asp:TableCell>

The above fills the cell by distorting the image.

If it happens at the server side how does it know what size to make the
image so that it fits.

Do you think it fits because at the client side the cell is made to fit the
image?



Thanks

You can manipulate on images only on server side. Table resizing takes
place on client side. You can't really combine these two things well.
Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Patrice]

Agree IMO you'll have to do this client side (see my other post). This post
make me think that it might be enought either width or height (but not both)
to 100% whatever best fit (and make sure to clear the other). By default
most browser should then honor the size you told and scale accordingly for
the other dimension. You'll still hjave to run some client code to find out
which one should change...

<asp:TableCell runat="server" ID="TableCellR4C1" height="300"
BorderStyle="Groove">


<asp:Image ID="Image1" runat="server" AlternateText="My Image"
Height="100%"

ImageUrl="~/Images/mydefault.jpg" Width="100%" /><br />

</asp:TableCell>

The above fills the cell by distorting the image.

If it happens at the server side how does it know what size to make the
image so that it fits.

Do you think it fits because at the client side the cell is made to fit
the image?



Thanks

You can manipulate on images only on server side. Table resizing takes
place on client side. You can't really combine these two things well.
Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[active]

I would know how to do it if I were writing a Window app but have no idea
how to interface such code with this app.

Does this NG include topics relating to using System.Drawing for web design?


thanks

You need to use GDI+ with System.Drawing namespace. It may not be as
simple as you would like.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine these
two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[active]

IMO you'll have to do this client side using JavaScript as you need to
know how the table cell is rendered. Basically it would be something like
:
- once the document is loaded, get the size of the cell and set the image
properties accordingly to fit the appropriate dimension and to scale using
the same factor in the other direction to avoid distortion
- you may have to call this if the general layout is changed for example
if the user shrink the window and the table cell shrinks
- excessive scaling could result in a quality loss

You may want to consider other options depending on what exactly you are
trying to do...

I think I'll try the above. Sound interesting. If you could point me to some
code even slightly resembling what I need to do that would help move me
along.

thanks

---
Patrice

You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine these
two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Patrice]

I woud say something like (o being the image enclosed in the cell) :

function resizeImg(o)
{
var p=o.parentElement;
if ((o.clientWidth/o.clientHeight)>(p.clientWidth/p.clientHeight))
{o.style.width='100%';o.style.height='';}
else {o.style.width='';o.style.height='100%'}
}

And call this using the onload event. You'll likely have also to think about
which dimension should be set to 100%...

--
Patrice

IMO you'll have to do this client side using JavaScript as you need to
know how the table cell is rendered. Basically it would be something like
:
- once the document is loaded, get the size of the cell and set the image
properties accordingly to fit the appropriate dimension and to scale
using the same factor in the other direction to avoid distortion
- you may have to call this if the general layout is changed for example
if the user shrink the window and the table cell shrinks
- excessive scaling could result in a quality loss

You may want to consider other options depending on what exactly you are
trying to do...

I think I'll try the above. Sound interesting. If you could point me to
some code even slightly resembling what I need to do that would help move
me along.

thanks

---
Patrice

message You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine
these two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[active]

Thanks for all the help

Agree IMO you'll have to do this client side (see my other post). This
post make me think that it might be enought either width or height (but
not both) to 100% whatever best fit (and make sure to clear the other). By
default most browser should then honor the size you told and scale
accordingly for the other dimension. You'll still hjave to run some client
code to find out which one should change...

<asp:TableCell runat="server" ID="TableCellR4C1" height="300"
BorderStyle="Groove">


<asp:Image ID="Image1" runat="server" AlternateText="My Image"
Height="100%"

ImageUrl="~/Images/mydefault.jpg" Width="100%" /><br />

</asp:TableCell>

The above fills the cell by distorting the image.

If it happens at the server side how does it know what size to make the
image so that it fits.

Do you think it fits because at the client side the cell is made to fit
the image?



Thanks

You can manipulate on images only on server side. Table resizing takes
place on client side. You can't really combine these two things well.
Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[active]

I tried ( with and without the runat="server"):

<head id="Head1" runat="server">

<title></title>

<script type="text/jscript" language="JavaScript">

function resizeImg(o)

{

var p=o.parentElement;

if ((o.clientWidth/o.clientHeight)>(p.clientWidth/p.clientHeight))

{o.style.width='100%';o.style.height='';}

else {o.style.width='';o.style.height='100%'}

}

</script>

</head>



And I tried :

<body style="background-color: rgb(25,25,112)">

<script language="JavaScript" type="text/jscript">

function resizeImg(o)

{

var p=o.parentElement;

if ((o.clientWidth/o.clientHeight)>(p.clientWidth/p.clientHeight))

{o.style.width='100%';o.style.height='';}

else {o.style.width='';o.style.height='100%'}

}



In all cases



<asp:Image ID="Image1" runat="server" AlternateText="My Image" Height="100%"

ImageUrl="~/Images/mydefault.jpg" OnLoad="resizeImg(Image1)" Width="100%"
/><br />



produced

'resizeImg' is not a member of 'ASP._default_master'



thanks again

 

[active]

I have
<%@ Master Language="VB" CodeFile="Default.master.vb"
Inherits="Default_master" %>

is that incompatable with having javascript also?





thanks

I woud say something like (o being the image enclosed in the cell) :

function resizeImg(o)
{
var p=o.parentElement;
if ((o.clientWidth/o.clientHeight)>(p.clientWidth/p.clientHeight))
{o.style.width='100%';o.style.height='';}
else {o.style.width='';o.style.height='100%'}
}

And call this using the onload event. You'll likely have also to think
about which dimension should be set to 100%...

--
Patrice

IMO you'll have to do this client side using JavaScript as you need to
know how the table cell is rendered. Basically it would be something
like :
- once the document is loaded, get the size of the cell and set the
image properties accordingly to fit the appropriate dimension and to
scale using the same factor in the other direction to avoid distortion
- you may have to call this if the general layout is changed for example
if the user shrink the window and the table cell shrinks
- excessive scaling could result in a quality loss

You may want to consider other options depending on what exactly you are
trying to do...

I think I'll try the above. Sound interesting. If you could point me to
some code even slightly resembling what I need to do that would help move
me along.

thanks

---
Patrice

" active" <[email protected]> a écrit dans le message de
uI%[email protected]...

message You can manipulate on images only on server side.

Does this mean using code such as VB?
If so, can you point me to a place where I can see some code?

Table resizing takes place on client side. You can't really combine
these two things well. Better find a compromise.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


I want an image in a tablecell to be scaled to fit the cell without
distorting the image.

I don't know what the image aspect ratio will be.

Sometimes I'd expect to see the width fit the cell and the height be
smaller than the cell.

Sometimes I'd expect to see the height fit the cell and the width be
smaller than the cell.

I tried 100% for both width and height but that makes both fit with
distortion.

Is there any way to do this?



Thanks

 

[Patrice]

This is JavaScript client side code. You declared this on the server side
onload event (second case) or wihtout triggering code execution (no HTML
attribute onload on the body tag)...

The simplest way is likely to use :
http://msdn2.microsoft.com/en-us/li...riptmanager.registerstartupscript(VS.80).aspx
to render client side startup script...

Make sure also to pass the clientId of the image if appropriate...

 

[active]

I have no idea where to put this.
In the code-behind?
If so, in the Page_Load event?

also, would you recommend jscript or javascript

and include both the "language" and the "script type"

Can't thank you enough for all the help

 

[active]

I have no idea where to put this.
In the code-behind?
If so, in the Page_Load event?

also, would you recommend jscript or javascript

and include both the "language" and the "script type"

Can't thank you enough for all the help

Looks like the code behind can be included in either the Page_Load
Default.Master.vb file or the Default.Master

But I still have the same problem

thanks


Second case or first case? I noticed that Head says to run at server but
Body does not. Is that what you arre refering to?