如何让Bootstrap列内图片延伸至视口右侧边缘？

问题场景 #

在Bootstrap容器内有两个各占50%宽度的列：左列纯文本，右列包含文本和一张图片。需求是让图片突破列与容器的限制，延伸到视口右侧边缘，但图片上方的文本必须保留在列的边界内。不想使用绝对定位，之前尝试过全屏突破容器的技术但不适配半宽列；自行通过计算空间设置图片宽度的CSS代码始终存在间隙，考虑列的gutter/padding后又出现溢出问题。

初始尝试代码（存在问题） #

@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);
  }
}

解决方案 #

无需依赖固定断点的媒体查询，通过相对单位计算即可实现适配所有断点的效果，同时避免间隙和溢出问题：

修正后的CSS代码 #

.img-break-right {
  max-width: none;
  /* 宽度 = 列内容宽度 + 容器右侧到视口的空白距离 */
  width: calc(100% + ((100vw - 100%) / 2));
  /* 负margin抵消右侧空白，让图片边缘贴合视口 */
  margin-right: calc(-((100vw - 100%) / 2));
}

完整HTML代码 #

<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 img-break-right" />
    </div>
  </div>
</div>

原理说明 #

• 100% 代表图片所在列的宽度（包含内边距），100vw 是视口总宽度，(100vw - 100%) 是容器左右两侧的总空白宽度，除以2后得到右侧空白的宽度。
• 通过将图片宽度设置为「列宽度 + 右侧空白宽度」，再用负margin-right抵消右侧空白，实现图片从列内左侧延伸至视口右侧的效果，同时不影响列内文本的布局。
• 该方案自动适配所有Bootstrap断点，无需编写多套媒体查询代码。

内容的提问来源于stack exchange，提问作者Timothy Fisher