用于全宽（100% 浏览器）滑块的好的原生图像尺寸是多少？答案

【问题标题】：What is a good native image size to use for a full width (100% of browser) slider?用于全宽（100% 浏览器）滑块的好的原生图像尺寸是多少？
【发布时间】：2012-06-26 23:59:14
【问题描述】：

我正在构建一个包含全宽滑块的网站； 浏览器窗口的 100%。 CSS 应该是这样的

.slider {
    width:100%;
}

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

我的困境是，如果我使用宽度为 1600 像素的图像，并使用 CSS 将其缩放到 100%，那么对于最大化浏览器（显示器宽度）小于 1600 像素的任何人来说，这都可以，因为图像将被缩放向下而不是向上（暂时不考虑移动/响应大小的考虑）但是在非常大的显示器上使用最大化浏览器的人会使图像放大而不是缩小，因此它的外观会略有下降。

我检查了几个滑块，它们使用的图像宽度约为 2000 像素，但是否存在不需要在大部分显示器上放大的宽度？

请注意：我不是询问 CSS、网格系统、twitter Bootstrap、响应式或自适应网站、960 像素宽度的网站或类似的东西。我也不是在谈论 100% 的 网站包装器 的滑块。我只是询问用于创建滑块的图像文件的像素宽度，该滑块按浏览器宽度的 100% 缩放。

【问题讨论】：

标签： css image

【解决方案1】：

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

http://960.gs/

【讨论】：

你确定你明白我的问题吗？我正在做一个 100% 宽度的滑块 - 100% 的浏览器窗口。
好吧，除非您动态执行，否则无法知道 100% 是多少像素，因为每个人的分辨率都不同。
是的，顺便说一句，对不起，我认为我的问题没有让“全宽”很清楚。是的，我知道它必须是 100%，我要问的是关于从哪里开始的最佳指南，或者换句话说，用户最有可能将其代理最大化到的最大宽度；为了避免放大图像......换一种方式问它是否存在我们通常认为“与通常一样宽”的物理显示器宽度

【解决方案2】：

1920px 是您想要达到的最高值。这被认为是屏幕分辨率尺寸的“高端”，任何更高的东西都会使浏览器发挥作用。只要您将幻灯片宽度设置为 100%，它将毫无问题地调整为分辨率高于 1920 的屏幕尺寸。这也将解决占用过多带宽的问题，并且不会影响您的加载时间（这是您网站功能的关键）。

【讨论】：

抱歉，我好像没问对问题 - 请参阅我的编辑
感谢您的全面回答，但我不明白您为什么要放入列中...从 css 的角度来看，我需要的只是 .container { width:100%容器的父级是 ...我的问题纯粹与所用图像的像素宽度有关...再次抱歉，如果我没有说清楚。
您生成列，以便您的图像将动态调整到屏幕尺寸。您可以将幻灯片设置为列宽的 100%。因此，如果屏幕为 960 像素，您的图像将知道生成 16 列的大小，或者如果屏幕为 1060 像素，它将知道基于 18 列生成。 “列”实际上并不代表用户可以在屏幕上看到的物理网格，而是浏览器充当的网格使用语言的桥梁来基于每个屏幕分辨率的特定页面上的内容大小。这是一种响应式 Web 开发方法
如果您不想使用这种方法，那么 1920 就足够了。如果你给它一个 100% 的宽度，它会自动调整。你去的越大，你使用的加载时间和带宽就越多，这只会浪费时间和空间。
是的，我认为我不需要网格。 1920 年可能是我正在寻找的答案，但为什么是 1920 年呢？

【解决方案3】：

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

如果您想将自适应网站制作为显示器和移动设备，我只能建议使用twitter bootstrap 或类似的东西。您也可以使用网格系统，例如：designinfluences。

【讨论】：

我认为您的回答与其他人一样（尽管我已尽最大努力）将我的问题与网站的标准宽度混淆了。相反，我问的是人们开发的最大的典型屏幕，而不是响应式设计，而是 100% 带有滑块的浏览器中使用的 jpeg 文件的像素宽度（在大屏幕上最大化时）。最好不要“例如，我的显示器的分辨率为 2560x1440。没有人能做出如此大的网站分辨率。”
阅读这篇文章，也许它会有所帮助：stackoverflow.com/questions/456250/…
No .. AFAICT 这根本不是我要问的，这个问题听起来像是关于调整 css 以调整显示器暗淡的讨论 - 看看这个主题的滑块，这是一个相当普遍的景象，在这种情况下，图像从 2100 像素缩小，这意味着如果任何人在 2100 像素以上的显示器上最大化demo.udfrance.com/voltage/wordpress，主题就会中断

【解决方案4】：

根据 2013 年全球屏幕分辨率统计，1920x1080 的显示尺寸在当前流行的 10 大屏幕尺寸中排名第四。这也是迄今为止显示器的最后一款高清显示器。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

在 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，例如（提供免费层）https://cloudinary.com/ 或 https://www.cloudimage.io

【讨论】：

人们认为这应该是 2019 年新选择的答案吗？我有点脱节，所以我不太了解自己。如果这得到一些选票或 cmets，我可以更改它。