Question

此图片太大，我希望它符合窗口的大小：http://zgaming.comxa.com

但是我不明白怎么样，我也试过高度和宽度100％

HTML

<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></img></div>

CSS

    .bgimg {
    position: absolute;
    top: 0;
    left: 0;
    z-index:-99;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

我也试过这个

.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;
}

这个答案 https://stackoverflow.com/a/43612299/7874902

有效，但在移动设备底部有一些空白区域。

Answer 1

你应该设置

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

并尝试

background size: contain;

与封面一样，它可能会切割图像的一部分。检查一下：
w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

希望这段代码可以帮助你。

＆＃13;

.bgimg {
  width: 100%;
  margin: 0;
  padding: 0;
}

.bgimg img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></div>

＆＃13;

Answer 3

此解决方案纯粹只是为了展示如何尝试使用单个图像填充视口，而不是额外的。

我们使用min-height: 100vh告诉body标记与视口一样高。我们使用background-size: cover对图像进行居中，让它填充所有body元素，必要时进行裁剪，但保持宽高比。

body {
  margin: 0;
  height: 100vh;
  background-image: url( 'http://zgaming.comxa.com/dist/img/bg.jpg' );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

尝试填充视口时，您必须要注意一件事，尤其是具有不同宽高比的视口;你要么必须在某个时刻裁剪部分图像，要么扭曲它。下面我们选择裁剪它而不是扭曲它。

Answer 4

您无法在img标记上使用$()。

尝试与你的background-size: cover进行对比，并在宽度和高度上将div大小设为100％。

您可以直接在正文上制作此规则：

background-image

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

图像/ div太大了

4 个答案: