CSS 用于全宽（浏览器的 100%）滑块的最佳原生图像尺寸是多少？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11194264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is a good native image size to use for a full width (100% of browser) slider?
提问by byronyasgur
I am building a website which includes a full width slider; 100% of browser window. The CSS would be like this
我正在构建一个包含全宽滑块的网站；100% 的浏览器窗口。CSS 应该是这样的
.slider {
width:100%;
}
... where the slider's parent is <body>, not some wrapper div.
...滑块的父级所在的位置<body>，而不是一些包装器 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.
我的困境是，如果我使用宽度为 1600 像素的图像，并使用 CSS 将其缩放到 100%，那么这对于任何最大化浏览器（监视器宽度）小于 1600 像素的人都没有问题，因为图像将被缩小而不是放大（暂时不考虑移动/响应大小的考虑）但是在非常大的显示器上使用最大化浏览器的人会将图像放大而不是缩小，因此它的外观会略有下降。
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?
我检查了几个滑块，它们使用的图像宽度约为 2000 像素，但是是否存在不需要在大部分显示器上放大的宽度？
Please Note: I am notasking 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.
请注意：我不是在问 CSS、网格系统、twitter Bootstrap、响应式或自适应站点、960px 宽度的网站或类似的东西。我也不是在谈论 100% 的网站包装器的滑块。我只是询问用于创建缩放到浏览器宽度的 100% 的滑块的图像文件的像素宽度。
采纳答案by Jeff
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).
1920px 是您想要的最高值。这被认为是屏幕分辨率尺寸的“高端”，任何更高的尺寸都会使浏览器起作用。只要您将幻灯片宽度设置为 100%，它就会毫无问题地适应比 1920 分辨率更高的屏幕尺寸。这也将解决占用过多带宽的问题，并且不会影响您的加载时间（这是您网站功能的关键）。
回答by Lightcoder
According to the global stats of screen resolutions of the year 2013, the display size of 1920x1080 is the fourth one among other top 10 popular current screen sizes. This one is also the last high definition display for the monitors so far.
根据2013年全球屏幕分辨率统计，1920x1080的显示尺寸在当前十大流行屏幕尺寸中排名第四。这也是迄今为止显示器的最后一个高清显示器。
回答by H.Saraf
I think its more of a persnal choice, depending upon your target audience. These stats might help you make an educated decision. http://www.w3schools.com/browsers/browsers_display.asp
我认为它更像是一种个人选择，取决于您的目标受众。这些统计数据可能会帮助您做出明智的决定。http://www.w3schools.com/browsers/browsers_display.asp
回答by JerryGoyal
Catching up with ever-large resolution display devices in yr2019, I would recommend size of 2400x1600px, optimized jpeg or next-gen image format with fallback support for jpeg.
在 2019 年赶上越来越大的分辨率显示设备，我会推荐大小2400x1600px、优化的 jpeg 或下一代图像格式，并支持 jpeg。
<picture>
<source srcset="sample_image.webp" type="image/webp">
<source srcset="sample_image.jpg" type="image/jpg">
<img src="sample_image.jpg" alt="">
</picture>
Sources:
https://flothemes.com/flothemes-image-sizes/
https://freshman.tech/image-optimisation/
来源：
https: //flothemes.com/flothemes-image-sizes/
https://freshman.tech/image-optimisation/
You may even go many steps smarter and use CDN which supports image optimization & delivery of responsive images like (free tier available) https://cloudinary.com/or https://www.cloudimage.io
您甚至可以更聪明地采取许多步骤并使用 CDN，它支持图像优化和响应式图像的交付，例如（可用免费层）https://cloudinary.com/或https://www.cloudimage.io
回答by Xella
As already noticed above, the standard width is 960 pixels. But many sites are doing adaptive, so you can not say for sure. My monitor, for example, has a resolution of 2560x1440. No one makes such a large site resolution.
正如上面已经注意到的，标准宽度是 960 像素。但是很多网站都在做自适应，所以你不能肯定。例如，我的显示器的分辨率为 2560x1440。没有人做出如此大的网站分辨率。
If you want to make an adaptive site as a monitor and a mobile device, I can only advise to use the twitter bootstrapor something similar. You can also use grid system, for example: designinfluences.
如果您想将自适应站点用作监视器和移动设备，我只能建议使用twitter bootstrap或类似的东西。您还可以使用网格系统，例如：designinfluences。
回答by JROB
960px is the standard full width for any content area of a web page to HOPEFULLY not have any overflow in a full browser window.
960px 是网页任何内容区域的标准全宽，希望在完整的浏览器窗口中不会出现任何溢出。
