...

View Full Version : px vs. % for image width



ajetrumpet
12-22-2010, 10:56 PM
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!

Excavator
12-23-2010, 12:51 AM
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.

ajetrumpet
12-23-2010, 04:31 AM
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. :p

Excavator
12-23-2010, 04:45 AM
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. :p

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?

ajetrumpet
12-23-2010, 05:52 AM
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.

Excavator
12-23-2010, 08:53 AM
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 :rolleyes:

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.

Kor
12-23-2010, 11:20 AM
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 :)

Apostropartheid
12-23-2010, 04:43 PM
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.

VIPStephan
12-23-2010, 05:34 PM
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 800600 pixels then they will get a horizontal scrollbar because the 900px image is larger than the screen. If they have a resolution of 19201200 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.

teedoff
12-23-2010, 05:47 PM
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. :p

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.

ajetrumpet
12-23-2010, 08:45 PM
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).

teedoff
12-23-2010, 08:57 PM
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

Apostropartheid
12-23-2010, 10:51 PM
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.

xelawho
12-23-2010, 11:30 PM
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 (http://css-tricks.com/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?

ajetrumpet
12-24-2010, 04:44 AM
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. :rolleyes:

Kor
12-24-2010, 11:06 AM
I think I have read about some tricks to have an image display at 100% of any given browser, but dont remember where.
Not a bright idea, unless the image is, in fact, a Flash design (vectorized, thought). To expand or to squeeze a bitmap image will distort it and make it ugly :)

sarenarichard
12-24-2010, 11:47 AM
Always use % instead of px so that your contents fit to the screen size.

Kor
12-24-2010, 01:31 PM
Always use % instead of px so that your contents fit to the screen size.
Always is much too much :) It depends on the design or the content. Better combine them. And use max- or min- CSS width/height, for safety.

ajetrumpet
12-24-2010, 03:02 PM
Always use % instead of px so that your contents fit to the screen size.

Well now...we've got THIS guy who seems to contradict all of the veterans in the technology world, and then there's Aaron the spammer. I think I'm becoming quite popular for attracting all sorts of attention to my threads. One gold star for me! woot woot! :rolleyes:

teedoff
12-24-2010, 09:18 PM
Not a bright idea, unless the image is, in fact, a Flash design (vectorized, thought). To expand or to squeeze a bitmap image will distort it and make it ugly :)

Well i never said what type image it was that I was reading about...lol But yes I think a vector image would be about the only type that could expand without distortion.

I guess I was suggesting he look into that option if he really wanted a background image to expand to fit wider view ports.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum