Question

我正在建立一个包含全宽滑块的网站; 100％的浏览器窗口。 CSS就像这样

.slider {
width:100%;
}

...滑块的父级是<body>，而不是某个包装div。

我的困境是，如果我使用宽度为1600px的图像，并使用CSS将其缩放到100％那么这对于任何最大化浏览器（监视器宽度）小于1600px的人来说都是好的，因为图像将被缩放没有向上（暂时将移动/响应大小的考虑因素排除在图片之外）但是，如果在非常大的显示器上使用最大化的浏览器，则会使该图像按比例放大而不会降低，因此外观会略微降低。

我检查了几个滑块，他们正在使用aprox 2000px的图像宽度，但是有一个宽度不需要在很大比例的显示器上放大吗？

请注意：我不询问CSS，网格系统，twitter boostrap，响应式或自适应网站，960px宽度网站或类似内容。我也不是在谈论一个100％网站包装的滑块。我只想询问用于创建滑块的图像文件的像素宽度，该滑块缩放为浏览器宽度的100％。

Answer 1

1920px是你想要的最高分。这被认为是屏幕分辨率大小的“高端”，任何更高的将使浏览器起作用。只要您将幻灯片宽度设置为100％，它就会调整到分辨率高于1920的屏幕尺寸而不会出现问题。这也将解决占用过多带宽的问题，并且不会影响您的加载时间（这是您网站功能的关键）。

Answer 2

根据2013年全球屏幕分辨率统计数据，1920x1080的显示尺寸是目前其他十大热门屏幕尺寸中的第四个。这个也是迄今为止显示器的最后一个高清显示器。

Answer 3

我想在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>

资料来源：
https://flothemes.com/flothemes-image-sizes/
https://freshman.tech/image-optimisation/

您甚至可以更聪明地使用CDN，该CDN支持图像优化和响应图像的交付，例如https://cloudinary.com/或https://www.cloudimage.io

Answer 4

960px是网页任何内容区域的标准全宽，在完整的浏览器窗口中没有任何溢出。

http://960.gs/

Answer 5

如上所述，标准宽度为960像素。但是很多网站都在做自适应，所以你不能肯定地说。例如，我的显示器的分辨率为2560x1440。没有人能做出这么大的网站解析。

如果您想将自适应网站设为监视器和移动设备，我只能建议您使用twitter bootstrap或类似内容。您还可以使用网格系统，例如：designinfluences。

Answer 6

我认为这更像是一种选择，取决于您的目标受众。这些统计数据可能有助于您做出明智的决定。 http://www.w3schools.com/browsers/browsers_display.asp

用于全宽（100％浏览器）滑块的原始图像大小是多少？

6 个答案: