如何允许列内的图像延伸到视口的边缘？-解网

问：

我有两个 50% 宽度的列存在于 Bootstrap 容器中。左列包含一些文本，右列包含一些文本和图像。我想让图像脱离列和容器并延伸到视口的右边缘。这是我的起始模板：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl. Congue eu consequat ac felis. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Commodo ullamcorper a lacus vestibulum sed arcu. Tristique et egestas quis ipsum suspendisse ultrices gravida. Sollicitudin ac orci phasellus egestas tellus. Accumsan in nisl nisi scelerisque. Eros donec ac odio tempor orci. Tincidunt eget nullam non nisi est sit amet. Mauris pellentesque pulvinar pellentesque habitant. Odio tempor orci dapibus ultrices in iaculis nunc sed augue. Faucibus purus in massa tempor nec feugiat. Cras semper auctor neque vitae tempus quam. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque.</p>
    </div>
    <div class="col-sm-6">
      <p>Odio tempor orci dapibus ultrices in iaculis nunc sed augue. Faucibus purus in massa tempor nec feugiat. Cras semper auctor neque vitae tempus quam. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque.</p>
      <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="" class="img-fluid" />
    </div>
  </div>
</div>

我的目标是允许图像向右缩放到视口边缘，但我希望它上面的文本保持在列的边界内。

如果可能的话，我想避免使用绝对定位。我正在研究这种技术，将图像从容器中分离出来并使其成为页面的整个宽度，但不知道如何将其调整为半角列。

我得到的最接近的只是通过计算从列边缘到视口边缘的空间 + 图像的 100% 来设置宽度：

@media (min-width: 576px) {
  img.img-fluid {
    max-width: none;
    width: calc(100% + (100vw - 540px) / 2);
  }
}

@media (min-width: 768px) {
  img.img-fluid {
    max-width: none;
    width: calc(100% + (100vw - 720px) / 2);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl. Congue eu consequat ac felis. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Commodo ullamcorper a lacus vestibulum sed arcu. Tristique et egestas quis ipsum suspendisse ultrices gravida. Sollicitudin ac orci phasellus egestas tellus. Accumsan in nisl nisi scelerisque. Eros donec ac odio tempor orci. Tincidunt eget nullam non nisi est sit amet. Mauris pellentesque pulvinar pellentesque habitant. Odio tempor orci dapibus ultrices in iaculis nunc sed augue. Faucibus purus in massa tempor nec feugiat. Cras semper auctor neque vitae tempus quam. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque.</p>
    </div>
    <div class="col-sm-6">
      <p>Odio tempor orci dapibus ultrices in iaculis nunc sed augue. Faucibus purus in massa tempor nec feugiat. Cras semper auctor neque vitae tempus quam. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque.</p>
      <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="" class="img-fluid" />
    </div>
  </div>
</div>

这似乎离得很近，总有一点点空间，我不知道为什么。我试过考虑列上 12px 的装订线/填充，但后来它溢出了。

HTML CSS 视口单元

如何允许列内的图像延伸到视口的边缘？

How can I allow an image inside of a column to extend to the edge of the viewport?

评论