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

【问题标题】：Fixed vertical sidebar with full width image background修复了具有全宽图像背景的垂直侧边栏
【发布时间】：2016-04-17 21:50:46
【问题描述】：

我有两个 div - 一个固定在页面左侧作为侧导航，另一个我有一个背景图像，我希望它是流动的，并覆盖 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>

如果已经完成，我很抱歉，但我找不到它，因为我不知道如何描述我在寻找什么。感谢我能得到的任何帮助。

【问题讨论】：

您的问题是什么？您的预期输出是什么。
这是您正在寻找的规则吗？ .content { background-size: cover; }
我希望背景图像是右侧 div 宽度的 100%，但我似乎无法使用 css 规则“背景图像”显示它。 .content { background-size: cover;} 对我不起作用，我使用的是 chrome？我可以使图像显示在 HTML 中，但无法控制它对站点的响应。给你一个想法，img im使用的是1024 x 2452
您希望背景图片仅位于内容区域（非侧边栏）还是整个页面？
只是内容区域。

标签： css background-image css-position

【解决方案1】：

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

我不得不稍微调整一下margin-left 属性，并用<img> 标记替换了您的image 类以简化。

.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>

【讨论】：

【解决方案2】：

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

更新： 我更新了代码，请检查下面的 sn-p 或转到 jsfiddle.net - ps：重新调整屏幕大小以查看响应。希望这有帮助

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>

【讨论】：

虽然效果很酷，但不是我想要的。如果可能的话，我只希望右侧的内容区域具有背景图像，使其具有响应性。抱歉，我是一名设计师，正在学习如何编码，但不是很好：/ 不过我非常感谢您的提要！