html - 使用 css 缩小背景图像以填充屏幕

Question

我正在尝试在以下 URL 中使用被描述为技术 #2 的技术: http://css-tricks.com/perfect-full-page-background-image/

设置一个网页背景图片，在调整窗口大小时缩小尺寸。

我的HTML如下

<div class="bg">
  <img src="images/bg.jpg" alt="">
</div>

我的样式定义如下。

.bg {
  z-index: -1;
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

当图像小于屏幕并且需要放大时，此方法非常有效。但在缩小大图像的情况下，它不起作用，我只会在屏幕中央看到一个大图像。

我需要我的图像能够缩小、覆盖整个背景、保持纵横比。我不能使用 body bg 或其他任何东西，因为我需要能够更改幻灯片中的图像。

编辑:我必须将 HTML 结构设为 <div><img/></div>

编辑 2:我无法更改结构(或者至少我是这么认为的)的原因是我在以下位置使用脚本: http://malsup.github.com/jquery.cycle.all.js循环多个图像，并且该脚本不允许我更改 HTML 的任何结构方式。如果有人知道如何将它与背景图像一起使用或建议一个完全不同的脚本，我们将不胜感激。

Answer 1

如果你必须使用<img>标签来生成图像，只需删除 height来自您的 CSS 的声明；如果您只有 width，图像应保持纵横比 并适当调整大小。指定的。 (或者，您也可以指定 height 并删除 width，但指定 width 是行业规范。

---

对于 CSS 背景方法，试试这个，而不是:

.bg {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-clip: border-box;
background-origin: padding-box;
-moz-background-size: cover;
background-size: cover;
}

它需要 CSS3，但可以在较旧的浏览器中使用(-moz-background-size 用于 FF3.6；FF4+ 使用默认的 background-size)。此方法使用 CSS background-image优先于您的方法的属性。

原因是背景图片不是您网站页面有意义的内容的一部分，而是样式的一部分(它是背景图片，所以它属于背景)。因此，应该使用层叠样式 表格 来处理它。