Home/ Questions/Q 8126905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:19:38+00:00

I am building a website which includes a full width slider; 100% of browser

  • 0

I am building a website which includes a full width slider; 100% of browser window.
The CSS would be like this

.slider {
    width:100%;
}

… where the slider’s parent is <body>, not some wrapper div.

My dilemma is that if I use an image of say 1600px width, and scale it to 100% using CSS then this will be fine for anyone who’s maximised browser is (monitor width) is less than 1600px as the image will be scaled down not up ( leaving mobile/responsive size considerations out of the picture for the moment ) however someone using a maximised browser on a very large monitor will have that image scaled up not down and thus it will have a slightly degraded appearance.

I checked out a couple of sliders and they are using image widths of approx 2000px, but is there a width that would not need to be scaled up on a large percentage of monitors?

Please Note: I am not asking about CSS, a grid system, twitter Bootstrap, a responsive or adaptive site, a 960px width website or anything like that. Neither am I talking about a slider which is 100% of the website wrapper. I am simply asking about the pixel width of the image file used to create a slider which is scaled 100% of the browser width.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1920px is the highest you want to go. That is considered the “high-end” for screen resolution sizes, and anything higher will make the browsers act up. As long as you set your slide width to 100% it will adjust to screen sizes of a higher resolution than 1920 without a problem. This will also solve the problem of taking up too much bandwidth and won’t affect your load time (which is key for functionality of your site).

    • 0