Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts

    px vs. % for image width

    all,

    I know I've asked this before but not particular thing. If I develop on the machine with 1024x768 res and I insert an image on a webpage in dreamweaver, with a width in PIXELS that fills up the whole screen from left to right, will that image width automatically adjust on a screen size 20" smaller than my development screen? in other words, will that 900px picture that I inserted into my webpage from my 40" monitor still look the same online if I visit the website with my netbook computer and 10" monitor?

    I guess the other way to ask it would be: what is the factor that affects a webpage display? monitor size or resolution? or both?

    I don't know this and I can't test it right now. thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ajetrumpet,
    A 900px wide image is going to be 900px wide on any normal computer that is not resizing webpages, I say that because mobile devices resize things where normal browsers do not.
    Anyway, open that image up on a browser that is sized 800px wide and there will be an X scrollbar.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Excavator View Post
    Anyway, open that image up on a browser that is sized 800px wide and there will be an X scrollbar.
    a browser 800px wide? that doesn't make much sense. what do you mean by that?

    I didn't know browsers came in different sizes.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ajetrumpet View Post
    a browser 800px wide? that doesn't make much sense. what do you mean by that?

    I didn't know browsers came in different sizes.
    Browsers come in whatever size they get opened to. My monitors are 1920x1200 and I never open a browser to that size.
    Who's to say whether someone might open a browser window 800px wide?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Excavator View Post
    Browsers come in whatever size they get opened to. My monitors are 1920x1200 and I never open a browser to that size.
    Who's to say whether someone might open a browser window 800px wide?
    normal people don't. or I should say, the general public. I'm interested in catering to the vast majority that don't know anything about technology. which is still the majority of people out there.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    normal people don't. or I should say, the general public. I'm interested in catering to the vast majority that don't know anything about technology. which is still the majority of people out there.
    I have no idea what that means

    You asked if a pixel sized image will automatically adjust on a screen size 20" smaller than my development screen.

    It will not.

    will that 900px picture that I inserted into my webpage from my 40" monitor still look the same online if I visit the website with my netbook computer and 10" monitor?
    It will. You will just have to use scrollbars to see the entire image on anything that is sized less than 900px.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Excavator View Post
    I say that because mobile devices resize things where normal browsers do not.
    There are ways to prevent that. For instance using the META viewport
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by ajetrumpet View Post
    normal people don't. or I should say, the general public. I'm interested in catering to the vast majority that don't know anything about technology. which is still the majority of people out there.
    Yes they do. It's not uncommon to not browse full-screen. In fact I don't know anyone who does apart from my girlfriend, who has a netbook, so requires it. That's why designing to around 900 pixels width is recommended, despite a lot of people having monitors with resolutions much above 1024.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    I also don’t think that most people are too stupid to resize a browser window. And there is no way to determine how the majority of people are using their computer/a web browser unless you perform a huge study of the masses. The only thing you might be able (though not very reliable) is to check the screen resolution people are using but that still doesn’t say anything about the sizes of the browser window they prefer.

    A 900px wide image will be 900px wide on any computer screen, regardless of the screen size or resolution. If they have a resolution of 800×600 pixels then they will get a horizontal scrollbar because the 900px image is larger than the screen. If they have a resolution of 1920×1200 pixels the image will seem small on that screen, and I doubt that the majority of people having such screens are browsing in full screen mode as this would be a huge waste of space.

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by ajetrumpet View Post
    a browser 800px wide? that doesn't make much sense. what do you mean by that?

    I didn't know browsers came in different sizes.
    right click on your desktop and then on screen resolution then slide the slider all the way down and you will see what 800x600 screen res looks like..lol

    The bottom line is, a pixel is a pixel no matter what the screen res or browser size. The difference is how many pixels can be displayed on the y and x axis at a time.

    If you have a 900px wide image and someone views it in a browser 800px wide, then 50px will be cut off from each side or 100px from one side, depending on if you have the image auto centered.

    If someone views the same image on a pc with 1024px width, then they will have 124px space beyond what the width of the image is.

    The image wont stretch, not with it being set in pixels, and if you set it to 100% of the view port, then it will of course become distorted.

    I think I have read about some tricks to have an image display at 100% of any given browser, but dont remember where.

  • #11
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by teedoff View Post
    right click on your desktop and then on screen resolution then slide the slider all the way down and you will see what 800x600 screen res looks like..lol

    The bottom line is, a pixel is a pixel no matter what the screen res or browser size. The difference is how many pixels can be displayed on the y and x axis at a time.

    If you have a 900px wide image and someone views it in a browser 800px wide, then 50px will be cut off from each side or 100px from one side, depending on if you have the image auto centered.

    If someone views the same image on a pc with 1024px width, then they will have 124px space beyond what the width of the image is.

    The image wont stretch, not with it being set in pixels, and if you set it to 100% of the view port, then it will of course become distorted.

    I think I have read about some tricks to have an image display at 100% of any given browser, but dont remember where.
    This post is the one that I identified with the most, although all of you guys I'm sure are making perfect sense.

    So this begs the question: How are the developers of webpages creating consistency for the users? "Viewing" consistency, that is? I would assume that they are using the 900px "standard" as a guide for the width of webpages? And also assuming that most users will be viewing is screen res of 1024x768??

    That makes sense to me. And I've got the pixel concept down now. thanks so much!

    I believe I asked this question earlier, but I will again: If a website developer were interested i catering to EVERY user out there and satisfying everyone, wouldn't it be better to develop webpage controls using % measurements instead of px measurements? Or would that be even more of a problem? Using % measurements will automatically resize a webpage control, correct? And it would resize it based on the Screen Resolution, right? (monitor size is irrelevant when we're talking about this, I think).

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    As Apostro pointed out, its very common practice for web designers to design pages with a standard width of 900 to 1024 pixels.

    Yes you can use percentages to accomodate larger viewing areas and that is done the majority of time, however, you cant use percentages for every single element in your page. As an image is a perfect example. I dont like to use percentages for text either, I think ems are more suited for text.

    There are plenty of design examples of pages that are a min of 960px wide, then stretch out to fit larger viewing ports if you google them.

    Now if you just wanted a completely scalable webpage no matter what the browser width was, then dont use any graphics, no background colors, unless its on the body tag, and use a table layout with nothing but text for content....lol kinda like how my current employer likes to do his pages! lol

  • #13
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I would actually advise you not to use percentages without setting an upper pixel limit. This is because if people with very large resolution browse to your website, it would be very unusable.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I got a little bit obsessed by the idea of my page looking the same regardless of resolution, too, and VIPStephan was kind enough to share this with me: CSS media queries so if you have access to the stats about screen resolution for the visitors to the site you're working on you can pretty much account for any possibility.

    Of course it doesn't work in IE, but what does?

  • #15
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by xelawho View Post

    Of course it doesn't work in IE, but what does?
    nothing. but until the world becomes intelligent, intelligence is going to have to make up for what microsoft will never care about anymore.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •