jquery - 创建一个像 p2media.de 这样的网站

Question

我正在尝试创建一个类似 p2media 的网站(完整的视口(viewport)可滑动画廊，内容如下)

因为我是初学者，所以我的第一步是创建一个包含以下内容的完整视口(viewport)着陆页(单张图片)。

与

<div class="bodyoben">
</div>

.bodyoben {
    background: url(pics/homescreen.JPG) no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
/*    overflow: hidden;*/
}

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

是否也可以使用 < img > 来做到这一点？

我的第一次尝试是:

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

但结果不一样(由于失真，高度设置为自动)。

我的第二个问题:什么是实现完整视口(viewport) slider 库的最简单教程(我猜是使用 jQuery)。我尝试了一些，但未能很好地实现它们(也许是因为我是一个真正的初学者 :)。

到目前为止，谢谢真诚地

Answer 1

是的，您可以使用 img 标签来做到这一点，但只能(可靠地)使用 JavaScript。

如果您使用的是 jQuery 库，那么有一个名为 MaxImage 的插件非常适合这个目的。

演示:

http://www.aaronvanderzwan.com/maximage/examples/basic.html

元素页面:

http://www.aaronvanderzwan.com/maximage/

对于纯 CSS 版本，您可以做的最好的事情(可以说是最简单的)是使用图像作为每个 div 的背景，然后使用 background 的 cover 属性-size，正如您似乎已经在做的那样。

无论如何，可以在此处找到讨论一些现实世界选项的最佳文章:

http://css-tricks.com/perfect-full-page-background-image/

作为引用，上面那个链接中的一个选项，在不使用 background-size 或 JavaScript 的情况下，是做这样的事情:

HTML:

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

CSS:

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

提示:

为了将来获得更好的帮助，我建议您以更具描述性的方式提出问题，以解决您遇到的实际问题。您当前的标题不会引起多少注意，因为它没有说明您遇到的问题。