Struggling to make image heights match css and html - html

Question

I am using a template and editing it. I am trying to make the image on the left match the height and width of the image on the right at any viewport size, but I can't work out how to do it
The image on the right is a before/after slider.
I am unable to use percentage for the height of the image on the left and I'm not sure why.
I googled and it seems I need a container element with a height of 100% to use percentage height.
I tried that but it seemed to break things further
As you can see in the image, this container element has pushed the image down and i can't figure out why.
The section that i have highlighted in red is the container i added, as you can see there is no gap between the image and the top of this
if i look at the container above that, you can see that there is a gap between the top and the image
But the padding is zero, and the margin is zero.
So i can't figure out why there is the gap
Now looking at it maybe it's because of the rest of the image that stretches out of the image element behind? but why would that happen?
Below is the code without the extra container element that pushed the image down.
This is the html for the slider:
<div class="col-6 col-12-narrower">
<!-- My html edit 001 -->
<span id="testbox">
<div class="containerBA4">
<div class="image-container4">
<img
class="image-before4 slider-image4"
src="/images/conservatoryBefore.jpg"
alt="before"
/>
<img
class="image-after4 slider-image4"
src="/images/conservatoryAfter.jpg"
alt="after"
/>
</div>
<!-- step="10" -->
<input
id = 'input1'
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="slider4"
/>
<div class="slider-line4" aria-hidden="true"></div>
<div class="slider-button4" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
</svg>
</div>
</div>
</span>
<section class="box special">
<h3>Accumsan integer</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions special">
<li>Learn More</li>
</ul>
</section>
</div>
This is the CSS for the slider:
.containerBA4 {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%;
}
.image-container4 {
max-width: 800px;
max-height: 90vh;
/* aspect-ratio: 1/1; */
}
.slider-image4 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before4 {
position: absolute;
inset: 0;
width: var(--position);
/* filter: grayscale(100%) */
}
.slider4 {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider4:focus-visible ~ .slider-button4 {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line4 {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button4 {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
This is the html for the image including the original container element:
<div id="lockWrapWrapWrap" class="col-6 col-12-narrower">
<!-- My html edit 004 - add slider 3 -->
<section id="lockWrapWrap" class="box special">
<!-- <section id="lockWrap"> -->
<span id="lockImage" class="image featured"><img src="images/lock_handle.jpg" alt="" /></span>
And for the CSS im not sure what to include because the template is quite large and with all the classes its not so clear what relates to what and what is relevant.
This was some of the CSS i tried to add in order to get it working:
#lockImage {
display: block;
/* max-width: 100%; */
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
/* max-width: 800px; */
max-height: 50%;
}
Thanks for any help and if there is any way i could ask this question clearer or more concisely please let me know.