Tables and screen resolution

[Maxi]

I have a 30X16 cells table in my html page. Table height and width are
set to 100%. I have set size of every cell inside the table to 24
pixel.

When I open the html page in maximize state in either resolution 800 X
600 or 1152 X 864 it takes up the entire explorer size.

In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
in the cells it takes up the entire cell size (ideally it should as the
cell size is also 24 X 24 pixel) and If I change the screen resolution
to 1152 X 864 the picture is there but it does not take up the entire
cell size. Little bit of surrounding area is visible.

I know the reason, when you change the screen resolution, it has more
pixels to display hence the problem.

What I want to know is, if I use pictures of 50 X 50 pixels into those
tiny 24 X 24 pixel cells, can id grow and shrink automatically
detecting the screen resolution?

Note:
1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
requirement.
2. I want the table height and width set to 100%. Cannot modify this
either.

Is there any way out? I hope I have explained my problem properly.

 

[Els]

I have a 30X16 cells table in my html page. Table height and width are
set to 100%. I have set size of every cell inside the table to 24
pixel.

Contradicting on any other window width than 30 x 24 = 720pixels.

When I open the html page in maximize state in either resolution 800 X
600 or 1152 X 864 it takes up the entire explorer size.

Because you set width to 100%.

In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
in the cells it takes up the entire cell size (ideally it should as the
cell size is also 24 X 24 pixel) and If I change the screen resolution
to 1152 X 864 the picture is there but it does not take up the entire
cell size. Little bit of surrounding area is visible.

Of course. You told the table to take up the entire width available.
on 1152px width, this is 1152:30=38.4 pixels per cell. Wider than
24px.

I know the reason, when you change the screen resolution, it has more
pixels to display hence the problem.

So you understood that then

What I want to know is, if I use pictures of 50 X 50 pixels into those
tiny 24 X 24 pixel cells, can id grow and shrink automatically
detecting the screen resolution?

No, it will be minimum 30x50=1500px wide, and maximum whatever wider
window you have.

Note:
1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
requirement.

Then you should not put 50x50px images in them.

2. I want the table height and width set to 100%. Cannot modify this
either.

Then you shouldn't want the cells to be only 24px wide.

Is there any way out? I hope I have explained my problem properly.

AFAICS you've only explained that you want something impossible.

Reading between the lines, I'm suspecting you might want to have
*background* images in the table cells, which don't have to be
entirely visible, depending on the size of the cell?

Or are you trying to resize images in the browser?

 

[Maxi]

Exactly what I thought.

One question. If I remove the 100% table height width criteria, then on
800 X 600 screen resolution, it will take up the entire browser window
and if I chang the resolution to 1152 X 864, the table will appear in
the center leaving extra space in the background. Right? If yes, how
can I avoid this?

Is there no way (may be javascript) to detect the system's screen
resolution first and accordingly resize the pictures?
For instance If i have pictures of 50 X 50 pixels then,
If screen resolution is 800 X 600, resize it to 24 X 24
if screen resolution is 1280 X 720, resize it to 32 X 32
if screen resilution is 1152 X 864, resize it to 40 X 70

 

[Els]

Exactly what I thought.

One question. If I remove the 100% table height width criteria, then on
800 X 600 screen resolution, it will take up the entire browser window
and if I chang the resolution to 1152 X 864, the table will appear in
the center leaving extra space in the background. Right?

"in the center": no, only if you told it to.
"leaving extra space": yes, obviously.

If yes, how
can I avoid this?

Avoid what exactly?

Is there no way (may be javascript) to detect the system's screen
resolution first and accordingly resize the pictures?
For instance If i have pictures of 50 X 50 pixels then,
If screen resolution is 800 X 600, resize it to 24 X 24
if screen resolution is 1280 X 720, resize it to 32 X 32
if screen resilution is 1152 X 864, resize it to 40 X 70

I don't know - I don't do JavaScript.

 

[Maxi]

One question. If I remove the 100% table height width criteria, then on

"in the center": no, only if you told it to.
"leaving extra space": yes, obviously.


Avoid what exactly?

Avoid having extra spaces surrounding the table if the screen
resolution is high.

I don't know - I don't do JavaScript.

No problem, I will post it in Javascript forum.

 

[Els]

Avoid having extra spaces surrounding the table if the screen
resolution is high.

You're not seriously asking if you can put an object of 720pixels wide
in a frame of 1152pixels wide and make it have no space surrounding
it?

 

[Jim Higson]

Avoid having extra spaces surrounding the table if the screen
resolution is high.


No problem, I will post it in Javascript forum.

You could do this by using DOM to change the width/height of the <img> tags,
but the results would look awful since most browsers don't do scaling very
well (they use nearest neighbour algorithm, which looks bad). I suppose you
could keep pre-scaled images at certain sizes on the server, and change the
src attribute to link to the size you want.

Remember, screen size only really matters if the browser is fullscreen.

If you want truly scalable images, the only option at the moment is SVG, but
support is only there in a few browsers.

 

[Matt Clara]

I have a 30X16 cells table in my html page. Table height and width are
set to 100%. I have set size of every cell inside the table to 24
pixel.

When I open the html page in maximize state in either resolution 800 X
600 or 1152 X 864 it takes up the entire explorer size.

In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
in the cells it takes up the entire cell size (ideally it should as the
cell size is also 24 X 24 pixel) and If I change the screen resolution
to 1152 X 864 the picture is there but it does not take up the entire
cell size. Little bit of surrounding area is visible.

I know the reason, when you change the screen resolution, it has more
pixels to display hence the problem.

What I want to know is, if I use pictures of 50 X 50 pixels into those
tiny 24 X 24 pixel cells, can id grow and shrink automatically
detecting the screen resolution?

Note:
1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
requirement.
2. I want the table height and width set to 100%. Cannot modify this
either.

Is there any way out? I hope I have explained my problem properly.

Just don't set the table width, leave it blank, and your cells and their
content will determine the width of the table. You can't both have the
table at 100% and not have it fill the screen. If you really need it
something like that, nest your table with cells inside of a single celled
table set to 100% width.

 

[Toby Inkster]

You could do this by using DOM to change the width/height of the <img> tags,
but the results would look awful since most browsers don't do scaling very
well (they use nearest neighbour algorithm, which looks bad).

Opera uses a slightly better algorithm, but it's still not as good as
you could do in an image editor.

I suppose you could keep pre-scaled images at certain sizes on the
server, and change the src attribute to link to the size you want.

Or have the server generate scaled images as required. (And cache them.)

 

[Beauregard T. Shagnasty]

Is there no way (may be javascript) to detect the system's screen
resolution first and accordingly resize the pictures?
For instance If i have pictures of 50 X 50 pixels then,
If screen resolution is 800 X 600, resize it to 24 X 24
if screen resolution is 1280 X 720, resize it to 32 X 32
if screen resilution is 1152 X 864, resize it to 40 X 70

What will happen in my browser window which is 929 x 462 pixels?

Or if my JavaScript is disabled, as it usually is?

 

[Good Man]

What will happen in my browser window which is 929 x 462 pixels?

Or if my JavaScript is disabled, as it usually is?

....or if i'm viewing this on a handheld like an Ipaq or a Palm? Or, as
suggested, what if my screen resolution is 1280x720 but my browser window
is currently 600px wide?

basically what Beauregard is suggesting is that you DO NOT make your
website dependent on screen resolution in any way. Use HTML for content.
Use CSS to style your page accordingly.

Not to mention, falsely resized images (ie: an 300px wide image being
shrunk to 100px by an image tag) look TERRIBLE!!