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

what I need

<div >
        <div >
            <div >
                <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?

CodePudding user response：

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 >
        <img src="/forma.png"  alt="">
        <div >
            <div >
            </div>
        </div>
    </div>