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无法制作标题图片以适合查看

回答

相关问题