Jquery 创建像p2media.de这样的网站

我正在尝试创建一个网站，如（包含以下内容的全视口可滑动图库）

因为我是一个初学者，所以我的第一步是创建一个完整的视口登录页（单个图像），其中包含以下内容

与

博迪奥本先生{
背景：url（pics/homescreen.JPG）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
身高：100%；
/*溢出：隐藏*/
}

结果正是我想要的。始终居中，不扭曲，高度/宽度为100%。 现在我的问题是:

是否可以使用也执行此操作

我的第一次尝试是：

<div class="test" style="width:100%;">
        <img src="pics/homescreen.JPG" style="width: 100%;">
</div>

但是结果不一样（由于失真，高度被设置为自动）

我的第二个问题： 实现完整视口滑块库（我想是使用jQuery）最简单的教程是什么。我尝试了一些，但未能很好地实现它们（可能是因为我是一个真正的初学者：）

到目前为止,，

---

诚然，您可以使用

img

标记来实现这一点，但只能（可靠地）使用JavaScript

如果您使用的是jQuery库，那么有一个很好的插件专门用于此目的，称为MaxImage

演示：

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

#bg {
  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%;
}

项目页面：

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

#bg {
  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%;
}

对于仅CSS版本，您可以做的最好的事情（也可以说是最简单的）是使用图像作为每个div的背景，然后使用

background size

的

cover

属性，就像您已经做的那样

在任何情况下，讨论一些现实世界选项的最佳文章都可以在这里找到：

作为参考，上面链接上的一个选项（不使用

背景大小

或JavaScript）是执行以下操作：

HTML:

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

#bg {
  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%;
}

Protip:

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

#bg {
  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%;
}

---

为了在将来得到更好的帮助，我建议你用一种更具描述性的方式来问你的问题。您当前的标题不会引起什么注意，因为它没有说明您遇到的问题。

首先，您的bodyoben CSS声明不在样式块中，为什么不使用div代替图像并使用相同的技术？全宽/高滑块的工作原理与任何其他幻灯片相同，但具有其他尺寸（高度，宽度，最小高度，最小宽度100%）。不清楚你在问什么（=定义你的期望）。对不起，我的错误，bodyoben类不在样式块中（这是我的forst帖子，所以我在这里犯了一个错误：））Danfrom Germany查看www.p2media.de。我想要相同的布局（全屏图像，无论窗口大小和下面的内容如何）。但是我宁愿使用@user3737268来代替背景图像，为什么您喜欢使用

来代替背景图像？从语义上讲，使用背景图像更容易、更好，但只能（可靠地）使用JavaScript——为什么？只有使用CSS才能可靠地做到这一点<代码>位置和类似于

z-index

的东西应该可以完成这项工作。但我同意，将其用作背景图像而不是块图像更容易、更好。@DanFromGermany我已经编辑了我的答案。单独使用CSS可以很容易地做到这一点（我现在已经解释过了），但是当您需要额外的逻辑使其跨浏览器工作时，“可靠”部分就会出现。这取决于你想支持什么，以及你对什么是可靠的真正含义的解释。我的下一个标题将更具描述性。今天我将尝试您的代码，但背景图像方式似乎是最好的（或更少的代码）解决方案：）