object-fit

[JiangWeixian]

等比例缩放图片

export const Avatar = (props: AvatarProps) => {
  return (
    <StyledAvatar size={props.size}>
      <img role="avatar-image" src={props.src} />
    </StyledAvatar>
  )
}

const StyledAvatar = styled.span`
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 100%;

  img[role="avatar-image"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
  }
`