Resizing images per screen resolution

Discussion in 'Javascript' started by Maxi, Apr 7, 2006.

  1. Maxi

    Maxi Guest

    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
    Maxi, Apr 7, 2006
    #1
    1. Advertising

  2. Maxi

    [on] Guest

    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.innerWidth + " Height: " + window.innerHeight

    IE:
    "Width: " + document.body.offsetWidth + " Height: " +
    document.body.offsetHeight

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



    --- Resizeing Image ---

    var imgs = document.getElementsByTagName("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.getElementById("IDFORTABLE");
    var imgs = document.getElementsByTagName("img");

    Sidenote: Remember that getElementsByTagName 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)
    [on], Apr 7, 2006
    #2
    1. Advertising

  3. Maxi

    Maxi Guest

    [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.innerWidth + " Height: " + window.innerHeight
    >
    > IE:
    > "Width: " + document.body.offsetWidth + " Height: " +
    > document.body.offsetHeight
    >
    > (This was what I found, doing some searches online, might be a better
    > way somewhere)
    >
    >
    >
    > --- Resizeing Image ---
    >
    > var imgs = document.getElementsByTagName("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.getElementById("IDFORTABLE");
    > var imgs = document.getElementsByTagName("img");
    >
    > Sidenote: Remember that getElementsByTagName 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.
    Maxi, Apr 7, 2006
    #3
  4. 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#floats>

    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
    Thomas 'PointedEars' Lahn, Apr 7, 2006
    #4
  5. Maxi

    Maxi Guest

    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#floats>
    >
    > 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
    Maxi, Apr 7, 2006
    #5
  6. Maxi

    Randy Webb Guest

    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:100%;height:100%">

    Try it.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Apr 7, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew FPGA
    Replies:
    0
    Views:
    970
    Andrew FPGA
    Sep 26, 2005
  2. Mustufa Baig
    Replies:
    2
    Views:
    487
    bruce barker
    Nov 17, 2004
  3. Pat
    Replies:
    5
    Views:
    537
  4. Seige
    Replies:
    12
    Views:
    406
    Matt Kruse
    Jun 23, 2006
  5. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    348
    Proper
    Apr 21, 2009
Loading...

Share This Page