创建全屏图片库的简单方法是什么答案

【问题标题】：What is the simple way to create a full screen img gallery创建全屏图片库的简单方法是什么
【发布时间】：2013-05-22 13:35:51
【问题描述】：

我正在尝试创建一个简单的（但）全屏图片库，并采用了this article的第一个解决方案

所以，代码是：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我有一些 js 代码来更改（onclick）html 的背景属性 - 它可以工作。

两个问题：

在大于 1024x768（这是我的显示器的尺寸和所有图像的尺寸）的显示器上的 img 质量怎么样
不同纵横比的显示器上的 img 比例如何？图片可能看起来变形了？

有没有简单的（css或jquery解决方案）？

【问题讨论】：

可能有数百个插件可用于 JQuery 图片库。尝试搜索主要搜索引擎（Google、Bing..）。
background:cover 保证图片不变形。如果比例不是原始图像的比例，部分图像将被截断。您关于图像质量的解决方案将是上传更高质量的图像/使用更高 dpi 的图像，或者处理它。你不能无中生有——因此将图像放大到大于原始图像总是会产生一些负面影响。
您可能应该使用媒体查询来检测屏幕分辨率并按比例提供不同的图像。
@Ohgodwhy，使用Media Queries - 我必须为不同的显示器上传两个（或更多）距离的同一张图像吗？
@SunSky 是正确的。你需要有多个图像。如今，大多数设备都将它们吐出大约 2960x2100 或附近的东西（我忘记了确切的值）。这使您可以非常轻松地缩小规模。虽然它确实会迫使您在驱动器上占用大量空间，但如今大多数优秀的主机都不担心机架空间。

标签： jquery css fullscreen image-gallery

【解决方案1】：

图像质量只能与您正在加载的图像一样好。也就是说，如果您的图像是 1024x768，那么在等于或低于该分辨率的任何东西上都会看起来很棒。在具有更高分辨率的浏览器或显示器上，图像将被缩放，拉伸像素大于 1:1 并导致一些质量损失。我建议您尽可能使用最大的图像，或者使用@media 查询将较大的图像提供给较大的显示器，将较小的图像提供给较小的显示器以节省加载时间。

关于第二点，背景尺寸的封面指令旨在处理纵横比和尺寸问题，允许浏览器在可用空间中以正确的比例显示最大数量的图像。您能否详细说明您遇到的问题？

【讨论】：

非常感谢。如果我理解（这么认为）- 那么必须说- 呃。我会试试Media Query。假设 - 解决了。