图片/ DIV太大

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

你不能在img标签使用background-size: cover。

只要尝试使background-image与您的，使宽度和高度100％的div大小。

您可以直接让这条规则对身体：

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

body { 
 
    background: url('http://zgaming.comxa.com/dist/img/bg.jpg') center center no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
html{ 
 
height: 100% 
 
}

Answer 2

您应该设置

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

与

尝试

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

Answer 3

希望这个代码spinet帮助你。

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

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

Answer 4

该解决方案纯粹是指只展示如何试图用单个图像，无需额外填充视口。

我们使用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; 
 
}

有你有试图填补视口实现一个重大的事情，特别是与不同的纵横比视口;你要么在某个时候裁剪掉部分图像，要么扭曲它。下面我们选择裁剪它来扭曲它。