To ensure proper display of images, apply max-width: 100% to all img tags on your website. For the image in the second set of six columns in the provided picture, override this setting by using max-width: none. If you have used the .img-fluid class for this image, it should be removed as it sets max-width: 100%. View the demonstration in fullscreen mode.
Demo
body {overflow-x: hidden}
img {max-width: none;}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171051f041f02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-6">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing.
</h2>
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/1200x600/74bdcc/fff.jpg" alt="">
</div>
</div>
</div>
If the image is specifically sized or layered, use width: 50vw; for that particular dimension. Otherwise, when no specific dimensions are required, utilize the width: 50vw; rule for the image as illustrated below-
img {width: 50vw}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c786279627f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-6">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing.
</h2>
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/1200x600/74bdcc/fff.jpg" alt="">
</div>
</div>
</div>