css - 如何放置从 `.col-md-4` 到屏幕末尾的图像？

Question

如何放置从 .col-md-4 末尾到屏幕末尾的图像？

这是我必须按设计做的 - 红线是 .container 边界，文本左对齐，右边是图像(或 slider )。我无法执行 .col-md-8，因为图像需要在屏幕最宽的范围内移动。我可以以某种方式组合 .container 和 .container 流体吗？你有什么建议？图片必须在所有桌面尺寸上全宽可见。

我目前是用绝对位置做的，但这样图像就被切掉了，这是不可取的。 https://codepen.io/ivan-topi/pen/pGYYjj如果我从 .row 中删除 position: relative 并将其放在 .content 上，那么我可以使用 right: 0< 很好地定位图像 到屏幕的末尾，但在那种情况下，我不确定如何定位它而不在左侧重叠文本？

<div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
      </div>
      <div class="img-wrapper">
        <img src="https://via.placeholder.com/1300x450">
      </div>
    </div>
  </div>
</div>


.content {
  overflow: hidden;
  height: 450px;
  position: relative;
}
.row {
  position: relative;
}
p {
  font-size: 20px;
}
.img-wrapper {
  left: 435px;
  position: absolute;
  width: 100%;
  height: 450px;
  overflow: hidden;
}
img {
  width: 100%;
}

Answer 1

您可以在使用 col-md-8 时考虑负边距。诀窍是将右侧的空间量作为负边距添加到 col-md-8 内的容器中，以创建您想要的溢出:

.content {
  overflow: hidden;
  height: 450px;
  position: relative;
}

.row {
  position: relative;
}

p {
  font-size: 20px;
}
img {
  width:100%;
}
@media (min-width: 768px) {
  .negative {
    margin-right: calc((720px - 100vw)/2 - 15px);
  }
}
@media (min-width: 992px) {
  .negative {
    margin-right: calc((960px - 100vw)/2 - 15px);
  }
}
@media (min-width: 1200px) {
  .negative {
    margin-right: calc((1140px - 100vw)/2 - 15px);
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
      </div>
      <div class="col-md-8">
        <div class="negative">
        <img src="https://via.placeholder.com/1300x450" class="d-block">
        </div>
      </div>
    </div>
  </div>
</div>