How I can positionning my Image in such a way that the Image dont exceed my with screen?-CodePudding

Here what I have when I use this css code :

  .circleImage {
    position: absolute;
    width: 40%;
    left: 300px;
    top: 570px;
  }

And the result that I wish is here :

I try fixed and sticky in postion type, i dont exceed my screen but fixed or sticky does not correspond with my result

Thanks for the people who take time to help me

CodePudding user response：

Just use responsive units to position the image.

.circleImage {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 30vh;
  }

<img  src="https://www.pikpng.com/pngl/b/390-3904056_round-profile-round-profile-clipart.png">

CodePudding user response：

You're using fixed value like 300px which pushed the image outside the parent because the parent width is not that much wider. So use % like the answer above.

If you want to center it:

You can use this method to center any child with sticky/fixed/absolute container. Set the left and right value to 0. Then add margin-left and margin-right to auto. This will center the child regardless the parent width.

.circleImage {
    position: absolute;
    width: 40%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRn0sYfGooUSN-KGwa4xg2JbzdSB_wCC6_aA&usqp=CAU" >