Я хочу отобразить изображение в кружке. Я хочу полный круг с изображением. я знаю, чтобы достичь этого мне нужен пограничный радиус

Question

я пробовал с границей радиуса: 50%, я не получаю полных обведенных изображений

<Picture>
  <ProfileImage alt="test" src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"></ProfileImage>
</Picture>

const Picture = styled.div`
display: flex;
justify-content: space-around;
align-items: center;
background-color: blue;
height: 100%;
width: 50%;
`;
const ProfileImage = styled.img`
border-radius: 50%;
width: 70%;
`;

Что я получаю:

Answer 1

Решение состоит в том, чтобы вместо этого использовать div, размер которого должен быть квадратным (равными высоте и ширине), установить изображение в качестве фонового изображения для покрытия div.

• background-size: cover; поддерживает исходное соотношение сторон, т.е. без растяжения
• background-position: center; центрирует изображение по кругу

const ProfileImage = styled.div`
  background-image: ${({ src }) => `url(${src})`};
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  width: 100px;
  height: 100px;
`;

Answer 2

Чтобы сохранить то же самое с высотой, мы можем положиться на padding-top, заданное в процентах: % - задает верхний отступ в процентах от ширины элемента ( source ). Поэтому, если вы хотите получить квадратное изображение шириной 70%, вы можете установить padding-top: 70% вместе с height: 0, и оно получится в виде квадрата, где вы можете поместить изображение в качестве фона и использовать border-radius для него.

<Picture>
   <ProfileImage backgroundUrl="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</Picture>

const Picture = styled.div`
   display: flex;
   justify-content: space-around;
   align-items: center;
   background-color: blue;
   height: 100%;
   width: 50%;
`;

const ProfileImage = styled.div`
   width: 70%;
   height: 0;
   padding-top: 70%;
   background-image: ${({ backgroundUrl }) => `url("${backgroundUrl}")`};
   background-size: cover;
   background-position: center;
   border-radius: 50%;
`;