Fixed width table with a 100% width image in it is assuming theimages intrinsic size, although it do

  • Thread starter Thread starter satya.komatineni
  • Start date Start date
S

satya.komatineni

I have struggling with this for 2 days. I searched far and wide in
google and msdn etc. No luck. Hope one of you may have seen this. I
am
seeing this in ie6 and ie7

What I want
**************
1. A table with a single cell that is say 100px wide, laid out from
left to right.
2. I want to put an image in it and set its width to 100px as well


What I expect
******************
I see the image that is shrunk in width to 100px wide.


Instead I see
*******************
1. I do see the image shrunk to 100px
2. But I see the width of the "td" increased to 500px which is the
size of the actual image


Here is the source code for it
*************************************
<html>
<head>


<style>
#test {background:blue}
</style>


</head><body>
<p>before the table
<table id="testt"><tr><td id="test" width="100px">
<image width="100%" src="http://hiddenlakegardens.msu.edu/
seasonal_interests/fall/fall1.jpg">
</image>
</td></tr></table>
<p>after the table
</body></html>


Here is the URL you can use to see the blue background of the
stretched "td"


http://www.satyakomatineni.com/akc/display?url=DisplayNoteBodyURL&reportId=2400&ownerUserId=satya

Does anyone know how to be able to say the width of an image to 100%
while restricting its size using a container above such as a "td". I
can fix this by fixing the image width, but then I have to deal with
margins etc.


Your help is much much appreciated.
 
Hi,
Try this. All widths in pixels, not %.

- - - - -
<style>
#test {background:blue}
</style>

</head><body>
<p>before the table
<table id="testt" width="100"><tr><td id="test" width="100">
<image width="100" src="http://hiddenlakegardens.msu.edu/
seasonal_interests/fall/fall1.jpg">
</image>
</td></tr></table>
<p>after the table
</body></html>
- - - - -

Hope this helps,
Don
[MS MVP- IE]
 
Additional thought. By resizing the image through HTML, viewers of the page
are downloading the 162 kb image instead of a smaller ~6 kb image.

Don
[MS MVP- IE]

Don Varnau said:
Hi,
Try this. All widths in pixels, not %. [snip]

news:[email protected]...
Click to expand...
[snip]
 
Additional thought. By resizing the image through HTML, viewers of the page
are downloading the 162 kb image instead of a smaller ~6 kb image.

Don
[MS MVP- IE]

"Don Varnau" <don_04[at]varnau[dot]org> wrote in message

Try this. All widths in pixels, not %.
[snip]

news:[email protected]...
Click to expand...

[snip]
Click to expand...

Don,
Thanks for taking the time to look at this. Yes I could fix the image
width in pixels. That is what I may have to do. But the reason I am
looking for 100% is that I may have many sub divisions with in there
that I have to remember how I have sliced the main cell. Conceptually
it is better for me in this particular case to work with percentages.

The odd thing is the 100% actually does resize the image to right
width, it is just that the "td" will expand with empty space the rest
of the way.

Coming to the downloading size, I change these images quite often and
it is painful to cut them everytime to the size I want. I am generally
aware of the size limitation and try to pick images that are
relatively small enough with a few k here and there, and I wanted the
simplicity.

Nevertheless thank you for taking a look at it.

Satya
 
I have struggling with this for 2 days. I searched far and wide in
google and msdn etc. No luck. Hope one of you may have seen this. I
am
seeing this in ie6 and ie7

What I want
**************
1. A table with a single cell that is say 100px wide, laid out from
left to right.
2. I want to put an image in it and set its width to 100px as well


What I expect
******************
I see the image that is shrunk in width to 100px wide.


Instead I see
*******************
1. I do see the image shrunk to 100px
2. But I see the width of the "td" increased to 500px which is the
size of the actual image


Here is the source code for it
*************************************
<html>
<head>


<style>
#test {background:blue}
</style>


</head><body>
<p>before the table
<table id="testt"><tr><td id="test" width="100px">
<image width="100%" src="http://hiddenlakegardens.msu.edu/
seasonal_interests/fall/fall1.jpg">
</image>
</td></tr></table>
<p>after the table
</body></html>


Here is the URL you can use to see the blue background of the
stretched "td"


http://www.satyakomatineni.com/akc/display?url=DisplayNoteBodyURL&reportId=2400&ownerUserId=satya

Does anyone know how to be able to say the width of an image to 100%
while restricting its size using a container above such as a "td". I
can fix this by fixing the image width, but then I have to deal with
margins etc.
Click to expand...

Perhaps the CSS overflow property would help. See the CSS2 spec or your
favourite CSS book for details.
 
Back
Top