在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

用于平板电脑和手机，但对于桌面应该没问题：）

Answer 2

这是解决方法。我将div的高度设置为0，并将div的padding-top设置为图像的纵横比。这只是图像高度/图像宽度。我个人在1920/1000的图像上出现了52.08％。

Answer 3

如果我正确理解了您的问题，则您有一个全角图片，该图片可以在每种设备宽度上使用。宽度超过100％可以正常使用。为此，我们在引导程序中有w-100类。如果仍然无法解决问题，那么不妨整理一下您的代码，祝一切顺利。