将容器外部的图像展开到浏览器的左边缘

Question

我已经四处寻找并找不到解决方案 - 所以我不确定如果没有js这是否可行。

使用bootstrap，我有一个居中的容器，想要将图像扩展到容器之外的窗口的左边缘和容器的右边缘

HTML：

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p>
<img class="snapleft">
</p>
</div>
</div>
</div>

CSS：

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width:1170px;
}

.snapleft{
    position:absolute;
    left:0px;
}

小提琴 - https://fiddle.jshell.net/0y9dbyxg/

Answer 1

你需要将图像包装在一个容器内 - 本身不需要.snapleft，所以最后你的标记看起来应该是这样....

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
</div>
</div>
<div class="container-fluid">
<div class="col-xs-12">
<p>
<img >
</p>
</div>
</div>

Answer 2

您应该将position: relative;添加到容器元素中。

你可以查看绝对和＆amp;的定义。 MDN的相对位置：https://developer.mozilla.org/en-US/docs/Web/CSS/position。

Answer 3

@helptomout查看此jsfiddle，您可以使用引导网格来偏移列。 阅读有关网格系统here的信息。这样你的所有容器都会有响应。

Answer 4

您可以在自己的行中创建img，其大小可以基于容器加填充。这将适用于固定宽度，如您的示例或基于百分比。

#imageRow img {
   width: 610px;
   height: auto;
   margin-left: -95px;
}

https://fiddle.jshell.net/w0u1vLg2/2/

Answer 5

当您有两列并且想要将图像扩展到页面右侧时，我发现了一个非常简单的解决方案。对于其他尺寸，您只需要计算padding-left: calc(50vw + ...)。

.image-wrapper {
  height: 300px;
  padding-left: 50vw;
  background-position: center;
  background-size: cover;
  background-image: url('/path/to/image.jpg');
}

<div class="container">
  <div class="row">
    <div class="col-xs-6"> some text </div>
    <div class="col-xs-6">
      <div class="image-wrapper"></div>
    </div>
  </div>
</div>

如果要将图像扩展到右侧，请使用绝对定位：

.image-wrapper {
  height: 300px;
  padding-left: 50vw;
  position: absolute;
  right: 0;
  background-position: center;
  background-size: cover;
  background-image: url('/path/to/image.jpg');
}