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

Question

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

这是我必须做的设计-红线是.container的边界，文本在左边对齐，而右边是图像（或滑块）。我无法执行.col-md-8，因为图像需要延伸到整个屏幕。 我可以以某种方式组合.container和.container流体吗？你有什么建议？图像在所有桌面尺寸上都必须是可见的全宽度。

我目前使用绝对位置进行此操作，但是这样会剪切出图像，这是不理想的。 https://codepen.io/ivan-topi/pen/pGYYjj 如果我从position: relative中删除了.row并将其放在.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>

Answer 2

如果我了解你，你需要这个：

 <div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-4 p-0 d-flex align-items-center">
        <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 p-0">

        <img class="img-fluid"  src="https://via.placeholder.com/1300x450">

    </div>
  </div>
</div>
</div>

然后从.img-wrapper中删除position:absolute和left: 435px;

在这里检查：https://codepen.io/gionic/pen/QYoPqq

希望对您有帮助。