Question

我正在尝试创建一个简单的（但是）全屏img库，并采用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的背景attr - 它的工作原理。

两个问题：

如果显示器上的img质量大于1024x768（这是我的显示器大小和所有图像的大小）
在具有不同宽高比的显示器上img比例怎么样？图像看起来可能会变形吗？

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

Answer 1

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

在第二点上，background-size的封面指令旨在处理宽高比和大小调整的问题，允许浏览器在可用空间中以正确的比例显示图像的最大数量。你能详细说明你遇到的问题吗？

创建全屏图库的简单方法是什么？

1 个答案: