Having an issue with positioning a rounded image to the left of a webpage. Despite trying various methods, the image ends up flat with its corners missing and positioned on the right side instead of the intended left. I've scoured the internet for answers but haven't been able to pinpoint the problem.
Here is the CSS code I've been using:
.family{
background: white;
overflow: hidden;
min-height: 100vh;
}
.family img{
position: relative;
object-position: 20px 100px;
top:50%;
left:50%;
width:50%;
height:50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
object-fit: contain;
}
And here is the HTML code:
<div class="family">
<img src="img/family.jpg">
</div>
Here is the image for reference: https://i.sstatic.net/q3zDp.png