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>标记来生成图像，只需从CSS中删除height声明即可;如果您只指定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属性，该属性优先于您的方法。

原因是背景图片不是网站页面的有意义内容的一部分，而是样式的一部分（它是背景图片，所以它属于背景）。因此，应使用级联样式表格进行处理。

Answer 2

从.bg div中删除所有样式，并将以下样式应用于img标记。

.bg img {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

P.S。由于您打算将其用作幻灯片，我建议您将班级.bg更改为.slideshow，以便它具有语义上的意义。

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

2 个答案: