html - 在 Bootstrap 中获取响应式全宽图像

Question

我在让标题图像在每台设备上全宽时遇到问题。我通过将背景大小更改为 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

还有我的问题截图:

Answer 1

你应该使用属性:

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

实现 100% 完全响应的图像。您可以随时将背景大小更改为:

background-size: content

对于平板电脑和手机，但对于桌面应该没问题:)