Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我不确定这是你想要达到的目标，但希望这会有所帮助

<强>更新我更新了代码，请检查下面的代码段或转到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>

Answer 2

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

我必须稍微调整margin-left属性，然后将image类替换为<img>标记以简化。

.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 个答案: