修复了具有全宽图像背景的垂直侧边栏

Question

我有两个 divs - 一个固定在页面左侧作为侧边导航，另一个我有一个背景图像，我希望它是流畅的，并覆盖宽度的 div。我看了看，找不到任何与我正在寻找的一样具体的东西。下面是我的代码。

.geodeticContainer {
 width: 100%;
 min-width: 800px;
}
.content {
 width: 100%;
 box-sizing: border-box;
 margin-left: 300px;
}
 .image {
  width: 100%;
  background-image: url("images/geodetics.jpg") norepeat center center fixed;
  z-index:999;
 }
.description {
 position: fixed;
 width: 300px;
 height: 100%;
 background-color: #eaeaed;
 padding: 20px;
 color: #0072bc;
}

<div class="geodeticContainer">

 <div class="description">
    This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
    </div>
 <div class="content">
    <div class="image"></div>
    </div>
    
</div>

如果已经完成，我深表歉意，但我找不到它，因为我不知道如何描述我要找的东西。感谢我能得到的任何帮助。

Answer 1

我不确定这是否是您想要实现的目标，但希望这会有所帮助

更新： 我更新了代码，请检查下面的代码片段或转到 jsfiddle.net - ps: re-size 屏幕以查看响应情况。希望这有帮助

body {
  padding: 0;
  margin: 0;
  background-color: black;
  color: black;
}
[class*="col-"] {
  height: 200px;
  background-color: white;
}
#img {
  background: url("http://s10.postimg.org/3nmoewzq1/dramatic_landscape_191458.jpg") top left no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
        <p>
          This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side. This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
        </p>
      </div>

      <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10" id="img">
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

Answer 2

您可以使用 flexbox 使图像在 div 内响应。

我不得不稍微调整 margin-left 属性并且我用 <img> 标签替换了你的 image class 以简化。

.geodeticContainer {
 width: 100%;
 min-width: 800px;
}
.content {
 display: flex;
 margin-left: 340px;
}
.content div img {
  width: 100%;
}
.description {
 position: fixed;
 width: 300px;
 height: 100%;
 background-color: #eaeaed;
 padding: 20px;
 color: #0072bc;
}

<div class="geodeticContainer">

 <div class="description">
    This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
    </div>
 <div class="content">
    <div><img src="images/geodetics.jpg"/></div>
    </div>
    
</div>

修复了具有全宽图像背景的垂直侧边栏

Fixed vertical sidebar with full width image background

css

css-position

background-image