圖片/ DIV太大

此圖片是太大了，我希望它適合窗口的大小：http://zgaming.comxa.com 圖片/ DIV太大

，但我不明白怎麼回事，我也嘗試過的高度和寬度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

的作品，但在移動設備上有在底部一些空白..

來源

2017-04-25 Andrei

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

來源

2017-04-25 13:32:24

圖像並沒有顯示任何與此代碼：？ – Andrei

什麼是「一個孩子的形象？」_你的措辭不清楚。 – hungerstar

兒童圖像是這樣的：div> img –

您應該設置

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

與

嘗試

與封面一樣，它可能會剪切圖像的一部分。檢查此：
w3schools.com/cssref/css3_pr_background-size.asp

來源

2017-04-25 13:34:53 JC97

希望這個代碼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>

來源

2017-04-25 13:38:02 seven

也許你應該描述你在做什麼以及爲什麼它能夠爲這個答案提供一些質量。 – hungerstar

謝謝你，但如果你也可以解釋爲什麼這個工程..？：D – Andrei

嗯，在手機上它不適合整個頁面，底部有一些白色 – Andrei

該解決方案純粹是指只展示如何試圖用單個圖像，無需額外填充視口。

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

有你有試圖填補視口實現一個重大的事情，特別是與不同的縱橫比視口;你要麼在某個時候裁剪掉部分圖像，要麼扭曲它。下面我們選擇裁剪它來扭曲它。

來源

2017-04-25 13:50:28 hungerstar

圖片/ DIV太大

回答

相關問題