我试图将一个图像与容器外的SVG掩码向右对齐，但这会导致溢出。当我反转并对齐左边的图像时，不会导致溢出。
目前我正在使用以下代码将图像向右对齐：
.alignfull {
margin-right: calc(100% - 50vw);
}
如果有更好的方法，任何提示都是受欢迎的。我尝试用这种方式来保持内容的垂直中心与容器中的内容对齐。因此，就我所知，position: absolute;并不是一个真正的解决方案。
这里有一个代码笔来演示我现在拥有的东西：https://codepen.io/monsmado/pen/pobzaVB
第一个问题是，您设置了一个不占用整个宽度的container类。如果你想让它占据整个宽度，你需要用container-fluid加上pd-md-0来去掉它的填充
然后我添加了一个offset-sm-2，它在左侧添加了2个空列，以在左侧和文本之间保持空间：
<div class="col-md-4 offset-md-2">
我去掉了你的保证金和你的col-lg-6，当你应用col-md-6时，它们是无用的
演示
.img-shape {
/*width: 100%;*/
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: cover;
object-position: center;
-webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1048 909" xmlns="http://www.w3.org/2000/svg"><path d="M695.513 113.586C697.313 112.186 698.813 110.286 700.613 108.786C719.513 92.586 736.913 74.886 753.913 56.886C770.413 39.286 790.113 26.286 812.413 17.686C862.013 -1.51404 913.113 -4.81404 965.113 6.48596C994.813 12.886 1022.41 24.086 1047.21 41.786C1047.21 319.486 1047.21 597.086 1047.21 874.786C1039.31 879.986 1031.71 885.786 1023.21 890.086L1008.61 896.686C991.313 904.186 973.013 908.086 954.213 908.686C922.213 909.686 890.313 907.386 859.113 899.686C836.913 894.186 815.113 887.886 793.613 879.986C770.013 871.286 746.913 861.186 723.913 851.086C680.113 831.986 636.613 811.986 591.713 795.586C562.613 784.986 533.413 774.686 503.213 767.486C499.613 766.586 496.013 765.786 492.413 764.886L436.213 753.686C436.213 753.686 400.513 749.286 382.613 747.286C341.013 742.686 299.313 741.586 257.513 740.986C223.813 740.486 190.113 742.286 156.513 739.586C117.213 736.486 82.2127 722.086 53.7127 694.586C18.2127 660.386 2.7127 617.086 0.212701 568.886C-1.2873 539.986 5.2127 512.186 17.6127 485.986C29.7127 460.586 47.1127 439.786 71.4127 424.986C86.9127 415.586 103.213 407.486 118.313 397.286C135.013 385.986 150.513 373.386 163.813 358.486C177.913 342.686 188.113 323.986 197.813 305.086C207.013 286.986 214.513 267.986 223.513 249.786C238.313 219.686 258.713 194.386 288.613 177.986C315.413 163.286 344.613 158.086 374.713 156.686C406.213 155.186 437.713 157.386 469.013 161.086C486.413 163.186 503.813 164.386 521.113 167.486C534.213 169.886 547.513 171.986 560.713 172.386C590.013 173.286 617.313 164.886 642.813 150.786C653.913 144.686 664.613 137.986 674.813 130.386L695.513 113.586Z"/></svg>') center/contain no-repeat;
}
.alignfull {
/*margin-right: calc(100% - 50vw);*/
}
@media (max-width: 768px) {
.img-shape {
width: 100%;
-webkit-mask: none;
margin-bottom: 2rem;
margin-top: 2rem;
}
.alignfull {
margin-right: auto;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<section class="">
<div class="container-fluid pr-md-0 vh-100 d-flex align-items-center">
<div class="row mx-0 align-items-center flex-row-reverse h-100">
<div class="col-md-6 pr-md-0 h-100">
<div class="alignfull d-flex h-100">
<img src="https://picsum.photos/id/1015/800" class="img-shape ml-md-auto my-auto">
</div>
</div>
<div class="col-md-4 offset-md-2 h-100 d-flex">
<div class="title-heading my-auto">
<h1 class="heading mb-3">Work Smart. <br> Not Hard.</h1>
<p class="para-desc text-muted">Lorem ipsum dolor sit amet, co&nsectetur adipiscing elit. Mauris faucibus aliquet ipsum, quis ornare orci euismod ut. Curabitur vel orci eu libero fermentum efficitur. Morbi fermentum a nisi sit amet ultrices.</p>
<div class="mt-4 pt-2">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>