<div class="avatar">
  <div class="avatar__square">
    <img src="./assets/images/avatar.jpg" class="avatar__image" alt=""/>
  </div>
</div>
                  
                

                  
.avatar {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

.avatar__square {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  overflow: hidden;
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__component-preview {
  width: 200px;
}