在引导程序中获取响应式全宽图像

我在将每个设备上的标题图像变为全宽时遇到了问题。我通过将背景大小更改为100％来解决此问题。现在图像的顶部和底部都有黑条，将内容与图像分开。解决这个问题的最好方法是什么？在引导程序中获取响应式全宽图像

这里是我的CSS：

//Color Pallette 
$backgroundWhite: #d1d1d1 
$spectrumRed: #a10019 
$darkestGrey: #2f2f2f 
$darkGrey: #252525 
$grey: #6e6e6e 

//Fonts 
$raleway: 'Raleway', sans-serif 
html,body 
    overflow-x: hidden 
    height: 100% 
    margin: 0 
    padding: 0 

li 
    font-family: $raleway 
.container-fluid 
    background-color: #333 
    border-bottom: 4px solid $spectrumRed 
#navbarItem:hover 
    color: $backgroundWhite 
#active 
    background-color: $spectrumRed 
    color: $backgroundWhite 

.wide (THIS IS THE IMAGE CONTAINER DIV) 
    margin-top: -60px 
    background: #000 url("/img/9114.jpg") center center 
    background-size: 100% 
    background-repeat: no-repeat 
    width: 100% 
    height: 80% 
    display: inline-block 

#modelName 
    background-color: $darkGrey 
    color: $backgroundWhite 
    width: 100% 
    margin-top: -35px 
    display: inline-block 
    border-bottom: 10px solid $spectrumRed 
#modelName h1 
    font-family: $raleway 
    font-weight: 600

我的问题的截图：

来源

2017-03-06 jacksons123

'background-size：cover'？ – BenM

这里的修复。我将div的高度设置为0，并将div的填充顶部设置为图像的高宽比。这只是图像高度/图像宽度。我个人以1920/1000的形象出现在52.08％。

来源

2017-03-08 22:53:04 jacksons123

你应该使用性质：

background-size: cover; 
height: 100vh; 
width: 100vw;

为了实现自己的100％完全响应图像。你总是可以改变你的背景大小：

background-size: content

为平板电脑和移动，但对于桌面应该罚款:)

来源

2017-03-06 22:05:35

我的问题与背景大小：封面。是当我在移动设备上查看图像时，它会切断大部分图像，并且只保留中心。 – jacksons123

@ jacksons123那么显然你可以将高度设置为80％。 – Ouroborus

@Ouroborus有没有一种方法可以使div高度不被硬编码，而是取决于div的宽度？因为如果没有高度和宽度，那么图像当然不会出现。 – jacksons123

在引导程序中获取响应式全宽图像

回答

相关问题