Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm building a portfolio website that uses full screen background images slideshow that are cropped to fit using a JavaScript plugin. To give the minimum amount of cropping whats the best ratio to make the images? ie I know 13" Macbooks are around 13:7 (when taking into account about 100px for the browser bar) but does that scale up on 15", 24", or 17" displays?

I know there are charts showing the most common dimensions but they just show a range of sizes and thats categorized by groups rather than actual dimensions.

share|improve this question
add comment

2 Answers

While one could compute the average aspect-ratio or, even better, the most frequent aspect-ratio of your displays for people of visit your site, it will be of little consequence.

As you have noted, the browser bar takes some space. It takes a different amount of space on each browser, at different resolutions and with different toolbars installed. Scroll bars will also add to this.

The biggest problem though, I strongly suspect, is that most people other than tablet users do not browse with their window full-screen. Even if they browse maximized, the browser will not always cover the entire screen, at least on Windows, depending on the start bar position, size and auto-hide state.

The best you can do is decide the ratio of image you have and do some scaling and cropping to get the balance you want. If you want to avoid space outside of the image, start with something like 4:3 and crop to it which mean most people will get to see most of the width of the image. Remember some people use their screens in portrait orientation, so you should be ready for that too.

share|improve this answer
add comment

You may find this useful for creating full screen background images.

share|improve this answer
    
Can you expand upon the link provided to address the question(s) in a little more detail? –  dan Dec 3 '13 at 8:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.