CSS無法制作標題圖片以適合查看

我在我的網站上遇到標題圖片問題 - 它的尺寸爲1920 x 410像素。CSS無法制作標題圖片以適合查看

我不想整個圖像顯示，但不知何故，它的各個部分被裁剪。

這是我的CSS：

#banner { 
    background: url('img/kontakt-header-novi.jpg'); 
    background-position: center; 
    background-size: cover; 
    height: 410px; 
}

和HTML：

<div id="banner"></div>

如何解決呢？

來源

2017-08-11 DaxHR

如果您的圖像在所有四面**上裁剪，這意味着您沒有使用CSS3和'backgro und-size「需要CSS3。 –

蓋並將其顯示在全尺寸...包含總是顯示所有圖像

#banner { 
 
    background: url('http://via.placeholder.com/350x150'); 
 
    background-position: center; 
 
    background-size: contain; 
 
    height: 410px; 
 
    background-repeat: no-repeat; 
 
}

<div id="banner"></div>

來源

2017-08-11 13:57:45 RacoonOnMoon

試過了，現在我的圖片符合寬度，但是在div的底部重複了 – DaxHR

，所以添加了background-repeat：no-repeat;到它 – RacoonOnMoon

我編輯了小提琴。你可以檢查出來。 – RacoonOnMoon

的簡單改變background-size: cover;到background-size: contain;

- >https://developer.mozilla.org/fr/docs/Web/CSS/background-size

來源

2017-08-11 13:58:20

嘗試過，現在我的圖片符合寬度，但是在div的底部重複獲取 – DaxHR

嘗試添加此屬性：'background-repeat：no-repeat;' –

CSS無法制作標題圖片以適合查看

回答

相關問題