473,553 Members | 3,085 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Resizing images per screen resolution

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. I
think it is not possible.

In that case 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? I want to take up full explorer area regardless of
the screen resolution.

Is there any way in 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

Apr 7 '06 #1
5 6188
Maxi wrote:
Is there any way in 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


--- Detecting Resolution ---

Moz:
"Width: " + window.innerWid th + " Height: " + window.innerHei ght

IE:
"Width: " + document.body.o ffsetWidth + " Height: " +
document.body.o ffsetHeight

(This was what I found, doing some searches online, might be a better
way somewhere)

--- Resizeing Image ---

var imgs = document.getEle mentsByTagName( "img");
for (var i = 0;i < imgs.length;i++ )
{
imgs.width = NEWWIDTH;
imgs.height = NEWHEIGHT;
}
If you have other images in the page, you can first "grab" the table
and then allt he images in that:

var thetable = document.getEle mentById("IDFOR TABLE");
var imgs = document.getEle mentsByTagName( "img");

Sidenote: Remember that getElementsByTa gName returns a HTMLcollection
and not an Array.
--- Triggering Resizing ? ---

window.onresize = FUNCTIONNAME;

function FUNCTIONNAME()
{
GRABSIZE
CHANGESIZE
}
(Sorry for all the psudo code, I was in a hurry)

Apr 7 '06 #2

[on] wrote:
Maxi wrote:
Is there any way in 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


--- Detecting Resolution ---

Moz:
"Width: " + window.innerWid th + " Height: " + window.innerHei ght

IE:
"Width: " + document.body.o ffsetWidth + " Height: " +
document.body.o ffsetHeight

(This was what I found, doing some searches online, might be a better
way somewhere)

--- Resizeing Image ---

var imgs = document.getEle mentsByTagName( "img");
for (var i = 0;i < imgs.length;i++ )
{
imgs.width = NEWWIDTH;
imgs.height = NEWHEIGHT;
}
If you have other images in the page, you can first "grab" the table
and then allt he images in that:

var thetable = document.getEle mentById("IDFOR TABLE");
var imgs = document.getEle mentsByTagName( "img");

Sidenote: Remember that getElementsByTa gName returns a HTMLcollection
and not an Array.
--- Triggering Resizing ? ---

window.onresize = FUNCTIONNAME;

function FUNCTIONNAME()
{
GRABSIZE
CHANGESIZE
}
(Sorry for all the psudo code, I was in a hurry)


Thank you for the start. I will take it over from here....... Even I
need little bit of researching before I achieve what I want.

Apr 7 '06 #3
Maxi wrote:
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.
No, it does not. You are having the common misconception that the display
resolution would have anything to do with the viewport size, because you
think that all people run their browsers in full screen mode (that is even
more than "full screen" window size; enlightening example for the latter:
<URL:http://dorward.me.uk/tmp/fullscreen.jpeg >).
I know the reason, when you change the screen resolution, it has more
pixels to display hence the problem.
That is not quite correct. With greater display resolution, there is more
space that any window can possibly occupy (up to full screen mode in some
browsers [type F11 in Geckos and IE]), hence more space the viewport of a
window can possibly occupy. However, the same thing happens when the
window is enlarged and the display resolution stays the same. And the
opposite happens with a smaller-than-fullscreen-sized window and the same
display resolution.
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?
You cannot detect the screen resolution, and even if you could, that would
not help you in any way (see the above screenshot). You can detect the
viewport size, but that would not help if client-side script support was
not present.
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.


If you stopped misusing tables (there is no tabular data here) and used
floating elements (floats) for each slide instead, you would not have this
problem in the first place.

<URL:http://www.w3.org/TR/CSS/visuren.html#fl oats>

And certainly you do not want to resize the images according to display
resolution. Think about the effect on image display quality; a Web
browser is not an image manipulation program with built-in sophisticated
methods such as cubic scaling, anti-aliasing etc.
PointedEars
Apr 7 '06 #4
That was really helpful. May be I need to re-think on the design of my
html file.

Thomas 'PointedEars' Lahn wrote:
Maxi wrote:
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.


No, it does not. You are having the common misconception that the display
resolution would have anything to do with the viewport size, because you
think that all people run their browsers in full screen mode (that is even
more than "full screen" window size; enlightening example for the latter:
<URL:http://dorward.me.uk/tmp/fullscreen.jpeg >).
I know the reason, when you change the screen resolution, it has more
pixels to display hence the problem.


That is not quite correct. With greater display resolution, there is more
space that any window can possibly occupy (up to full screen mode in some
browsers [type F11 in Geckos and IE]), hence more space the viewport of a
window can possibly occupy. However, the same thing happens when the
window is enlarged and the display resolution stays the same. And the
opposite happens with a smaller-than-fullscreen-sized window and the same
display resolution.
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?


You cannot detect the screen resolution, and even if you could, that would
not help you in any way (see the above screenshot). You can detect the
viewport size, but that would not help if client-side script support was
not present.
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.


If you stopped misusing tables (there is no tabular data here) and used
floating elements (floats) for each slide instead, you would not have this
problem in the first place.

<URL:http://www.w3.org/TR/CSS/visuren.html#fl oats>

And certainly you do not want to resize the images according to display
resolution. Think about the effect on image display quality; a Web
browser is not an image manipulation program with built-in sophisticated
methods such as cubic scaling, anti-aliasing etc.
PointedEars


Apr 7 '06 #5
Maxi said the following on 4/7/2006 9:32 AM:
[on] wrote:
Maxi wrote:
Is there any way in javascript to detect the system's screen resolution
first and accordingly resize the pictures?

No need for javascript to do it.
Thank you for the start. I will take it over from here....... Even I
need little bit of researching before I achieve what I want.


<img style="width:10 0%;height:100%" >

Try it.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Apr 7 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
6058
by: Nick D. | last post by:
Hi All! I hope there's someone that might be able to help me with this...I'm a designer, not a developer, so i hope this isn't TOO basic. Basically, I have a topbar that's a simple JPG image that I would like to put at the top of a web page...is there any way to make that image resize to fill up the whole browser window regardless of screen...
10
2299
by: riki | last post by:
Hi, i have a big problem...i'm using one jscript for resizing of all of my pics in popUp...in main html i'm having many little pics and clicking on them they open in popUp and resize to larger version of the same pic. now, it works fine and sometimes when i click on little one it doesn't resize well... this is the code: main.html
11
18812
by: Jozef | last post by:
I have some old code that I use from the Access 95 Developers handbook. The code works very well, with the exception that it doesn't seem to recognize wide screens, and sizes tab controls so that they are too big and wind up covering up some of the fields on the main form. Is there any good code out there that works in a similar fashion...
6
1921
by: neverstill | last post by:
hi- So I wrote this nice little page that will allow the managers to add images to the products table. Without too many details to confuse everything, basically what I'm doing is: getting an Image from there I'm creating a new Bitmap(Image, int w, int h); then I'm saving that bitmap various encoder quality values.
7
51380
by: mukeshgupta.WD | last post by:
Hi, i have seen in many web sites, the size of pages are automatically resized according to screen resolution. generally we create web layout for 800x600 but if we view it in1024x768 then the page open have wide space on right. Is there any kind of coding to overcome this situation.like when we wiew the page created in 800x600 in 1024x768...
14
48963
by: Seige | last post by:
Ever had headache when you can't resize the background width using CSS: body{ background: url(/images/bg.jpg) ; background-width: 800px; } It won't work, would it? Of course not, it's not even defined in CSS. So, let's try to work it out using Javascript: There are two methods, first method you prepare plenty of different
1
1598
by: belowcost1960 | last post by:
I have this page that is a gallery of images that runs a slide show. http://www.dannyvuart.com/gallery/gallery_new3.html Anyone know how or where to write a script that will 1) resize each image to a height and width max size, dependant on the users screen resolution, some images are taller, and some longer, want every image to display on...
10
7048
by: mishrarajesh44 | last post by:
hii all, I am facing a problem currently.. i have a script for image uploading and resizing.. the image uploading takes place properly for every size images.. but, the resizing works for only small sized iamages.. for eg. resizing takes place for 70 kb sized images but fails for 600kb or more.. my code is below..
5
1642
Ali Rizwan
by: Ali Rizwan | last post by:
Hi all, I was busy for a long time for a project. Now my question is that how can i resize any image like Jpg or bmp to the size of my form or screen resolution for example if screen resolution is 1024 x 768 then image resized to 1024 x 768. Is there any other way except Paintpicture??? Thanx >> ALI <<
0
7568
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7492
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7772
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8007
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6109
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5409
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5133
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3525
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1990
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.