Html 图像/div太大

此图像太大，我希望它适合窗口的大小：

但我不明白怎么回事，我也试过100%的高度和宽度

html

我也试过这个

.bgimg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index:-99;

}

.imgbg {
    position: absolute;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这个答案

---

工作正常，但在手机上底部有一些空白。

您不能在img标签上使用

背景尺寸：封面

只要试着用你的背景图像制作

背景图像

，并使div的宽度和高度为100%

您可以直接在主体上制定此规则：

body {
    background: url(./path_to_your_image) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

正文{
背景：url（'http://zgaming.comxa.com/dist/img/bg.jpg中-中不重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
身高：100%；
宽度：100%；
保证金：0；
}
html{
身高：100%
}

您应该设置

background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");

试着

background size: contain;

与封面一样，它可能会切割图像的一部分。 选中此项：

---

希望此代码对您有所帮助

.bgimg{
宽度：100%；
保证金：0；
填充：0；
}
.bgimgimg{
位置：绝对位置；
排名：0；
左：0；
z指数：-99；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
身高：100%；
}

---

此解决方案仅用于演示如何尝试使用单个图像填充视口，而无需额外设置

我们使用

minheight:100vh

告诉

body

标记与视口一样高。我们使用

背景尺寸：cover

将图像居中，并使其填充

主体

元素，必要时进行裁剪，但保持纵横比

正文{
保证金：0；
高度：100vh；
背景图像：url（'http://zgaming.comxa.com/dist/img/bg.jpg' );
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

也许你应该描述一下你在做什么，以及为什么它能为这个答案提供一些质量。非常感谢，但如果你也能解释一下为什么它能起作用嗯，在手机上，它不适合整个页面，底部有一些白色，只是设置了100%的图像高度和宽度。它获得了浏览器窗口的宽度和高度。是的，如果你有一个垂直的窗口，高度大于宽度，它很难看，只需在发布前检查你的代码什么是“儿童图像？”你的措辞不清楚。儿童图像像：div>imgLMAO我没说，这个div有儿童！孩子们是一个形象@Andrei检查我的新代码，直接在body works Fine上，可能应该说，“你不能用

img

标签来使用

background size:cover

”，这样会更清楚。是的，您最初的措辞确实表明div有子类。@Andrei您应该使用比使用

更具特殊性的类或CSS选择器！重要信息

。

background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");

background size: contain;