如何让html图片拉伸到整个屏幕,关于html：CSS：将背景图片拉伸到100％的屏幕宽度和高度？...

我有一个名为myImage.jpg的图像。 这是我的CSS：

body {

background-image:url("../images/myImage.jpg");

background-repeat: no-repeat;

background-size: 100% 100%;

}

由于某些原因，当我这样做时，myImage的宽度会延伸到整个屏幕，但是高度只会延伸到页面上其他所有位置的高度。 所以如果我放一堆

在我的html页面中，然后高度会增加。 如果我的HTML页面仅包含一个

那么背景图片的高度就是一个的高度

如何将背景图片的高度设为用户用来查看网页的屏幕的100％？

您需要将html的高度设置为100%

body {

background-image:url("../images/myImage.jpg");

background-repeat: no-repeat;

background-size: 100% 100%;

}

html {

height: 100%

}

http://jsfiddle.net/8XUjP/

如果您不想让背景失去它的比例，我建议您使用background-size: cover;：JS Fiddle

html {

background: url(image/path) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

资料来源：http：//css-tricks.com/perfect-full-page-background-image/

这应该是正确的答案。 我什至没有使用新的" cover"作为背景尺寸的可能值。

html, body {

min-height: 100%;

}

会成功的。

默认情况下，甚至html和body都仅与它们所容纳的内容一样大，但绝不超过窗口的宽度/高度。 这通常会导致非常奇怪的结果。

您可能还需要阅读http://css-tricks.com/perfect-full-page-background-image/

有一些很棒的方法可以实现非常好的和可伸缩的完整背景图像。

您是说min-height吗？ 问题是询问高度，而不是宽度。

VH单元可用于填充视口(也称为浏览器窗口)的背景。

(height:100vh;)

html{

height:100%;

}

.body {

background: url(image.jpg) no-repeat center top;

background-size: cover;

height:100vh;

}

尽管此代码可以回答问题，但提供有关如何和/或为什么解决问题的其他上下文将改善答案的长期价值。