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

Question

I have two 50% width columns that exist in a Bootstrap container. The left column contains some text, and the right column contains some text and an image. I'd like to allow the image to break out of the column and container and extend to the right edge of the viewport. Here is my starting template:
<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>
My goal is to allow the image to scale outwards towards the right to the edge of the viewport, but I want the text above it remain within the bounds of the column.
I'd like to avoid using absolute positioning if possible. I was looking at this technique to break an image out of a container and make it the full width of the page, but couldn't figure out how to adapt it for a half width column.
The closest I've gotten is just setting the width by figuring out the space from the edge of a column to the edge of the viewport + 100% of the image:
#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>
This seems really close by there's always a tiny bit of space left and I'm not sure why. I've tried accounting for the gutter/padding of 12px on the columns but then it overflows.