How can I make only part of the image visible on the screen?

I have a project where I have to leave only half of an image visible on the screen, like this:

what I need

<div class="container">
        <div class="line">
            <div class="column-50">
                <img src="/forma.png" alt="">
            </div>
        </div>
    </div>

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container{
position: relative;
}

.line{
display: flex;
flex-flow: row wrap;
background-color: #e7f5fe;
}

.column-50{
width: 50%;
}

.column-50 img{
position: relative;
margin-left: -20%;
float: left;
}

My project looks like this:

My projetc

Using margin-left: -20px, I managed to leave it the way I need it, but as expected, when the screen resolution changes, the image moves out of place.

Is there any way I can leave the image "locked" in that position?

>Solution :

please change the position of img tag in HTML add a class also apply this style. will fixed it

.bg-image {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%)
}

<div class="container">
        <img src="/forma.png" class="bg-image" alt="">
        <div class="line">
            <div class="column-50">
            </div>
        </div>
    </div>