0

我正在尝试创建一个简单的（但）全屏 img 画廊，并采用本文中的第一个解决方案

所以，代码是： 

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解决方案）？

4

1 回答 1

1

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

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

于 2013-05-22T05:35:51.240 回答