Question

我正在尝试创建一个类似p2media的网站（完整的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％高度/宽度。现在我的问题：

是否可以使用＆lt; img＆gt;？

我的第一次尝试是：

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

但结果并不相同（由于失真，高度设置为自动）。

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

到目前为止，诚恳

Answer 1

是的，您可以使用img标记执行此操作，但只能（可靠地）使用JavaScript。

如果您正在使用jQuery库，那么有一个很好的插件可以实现这个目的，称为MaxImage。

<强>演示：

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

项目页面

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

对于仅限CSS的版本，您可以做的最好的事情（可以说是最简单的）是使用图像作为每个div的背景，然后使用cover的{{1}}属性，你似乎已经在做了。

无论如何，可以在这里找到讨论一些实际选项的最佳文章：

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

作为参考，上面那个链接上的一个选项，不使用background-size或JavaScript，就是这样做：

<强> HTML：

background-size

<强> CSS：

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

<强>普罗蒂普：

为了将来提供更好的帮助，我建议您以更具描述性的方式提出您的问题，以解决您遇到的实际问题。你现在的头衔很少引起人们的注意，因为它没有说明你所拥有的问题。

创建像p2media.de这样的网站

1 个答案: