如何在网页背景中全屏显示gif图像？

Question

我试图让一个 GIF 适应整个屏幕，但目前它只是一个小正方形，而其余部分则是白色。然而，我希望它占据所有的空间。

有什么想法吗？

- user3264048

---

这是一个与 https://dev59.com/a3RC5IYBdhLWcg3wOOL1 相同的副本吗？ - user193130

Answer 1

如果是背景图片，使用 background-size: cover;

body{
    background-image: url('http://i.stack.imgur.com/kx8MT.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}

- Juan

Answer 2

IMG方法

如果您希望图像成为一个独立的元素，请使用以下CSS：

#selector {
    width:100%;
    height:100%;
}

使用此HTML：

<img src='folder/image.gif' id='selector'/>

小提琴

请注意，img标签必须放在body标签内。如果它放在其他地方，根据其他元素的属性，它可能不会填满整个屏幕。如果页面比图像高，这种方法也不起作用，会留下空白。这就是背景方法的作用所在。

背景图片方法

如果您想将其设置为页面的背景图片，可以使用此CSS：

body {
    background-image:url('folder/image.gif');
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

Fiddle

或者缩写版本：

body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

Fiddle

- zsaat14

---

我该使用img src来添加我的gif吗？ - user3264048

@user3264048 请查看编辑。有多种方法可以解决这个问题。 - zsaat14

@user3264048 可以给我解释一下 "doesn't take the full screen" 是什么意思吗？我正在制作一些演示fiddles。 - zsaat14

gif 图片位于我的屏幕右侧，就像一个中等大小的矩形。 - user3264048

@user3264048，您能否在您的问题或fiddle中发布其余的HTML代码？我认为还有其他因素影响了您的图片。 - zsaat14

这会重复图像，而不是拉伸填充，正如原帖作者可能意图的那样。 - ashleedawg

Answer 3

您可以使用GIF文件设置背景，并按以下方式设置body：

body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}

使用您的GIF更改背景图像URL。使用background-position：center，您可以将图像放置在中心，并使用background-size：cover将图片设置为适合整个屏幕。如果想要将图片调整到屏幕的100％，但不留下任何未显示的部分，则还可以设置background-size：contain。

以下是有关该属性的更多信息：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

希望有所帮助 :)

- davidlj95

---

MDN比w3schools更可靠。 - zsaat14

谢谢@zsaat14！我不知道MDN有那个参考指南！我会收藏它 :) - davidlj95

不占满屏幕 - user3264048

检查将 width:100% 和 height:100% 添加到 body 是否有效。 - davidlj95

Answer 4

在你的CSS样式标签中添加以下内容：

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}

- Michael

Answer 5

这应该是你想要的。

CSS:

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML：

<div class="gif-container"></div>

- jonsuh

Answer 6

如果您想将其用作背景图像并使用CSS3，则可以使用 background-size: cover; 来实现。

- AJC

Answer 7

同时确保其父元素的大小为100％

- Zeinab Mokhtar