CODEWITHSUNDEEP
javascripthtmlcss
Tim
Tim

Reputation: 2411

Trying to make a circle image

This question has been asked many times before but I still can't seem to figure such a simple problem out.

I'm trying to take an image and make it into a circle but when I try to do this:

const styles = {
  profileImage: {
    padding: "5% 0",
    objectFit: "cover",
    display: "block",
    width: "10vh",
    height: "10vh",
    borderRadius: "50%",
    border: "1px solid white", 
    margin: "0 auto"
  }
}

My image still comes out looking like this: enter image description here

The white border is what I'd like the dimensions to be but the actual photo gets cropped off for some reason. I would appreciate any pointers! Been pulling my hair out for this :-(

Thanks!

Upvotes: 1

Views: 59

Answers (1)

JBoothUA
JBoothUA

Reputation: 3149

I think it is due to this line:

padding: "5% 0",

Try removing that line

Upvotes: 5

Related Questions