<div class="profile-rounded_box">
    <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
<div class="profile-rounded_box">
  {% block profile_image %}
    {% include '@images--img' with profile_image only %}
  {% endblock profile_image %}
</div>
{
  "profile_image": {
    "img": "/img/silhoutte.jpg",
    "imgAlt": "silhoutte profile"
  }
}
  • Content:
    .profile {
      &-square {
        position: relative;
        height: auto;
        max-width: 200px;
        width: 100%;
        overflow: hidden;
        overflow-wrap: break-word;
    
        img {
          max-width: 100%;
        }
      }
    
      &-circle {
        position: relative;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        overflow: hidden;
    
        img {
          max-width: 100%;
        }
      }
    
      &-rounded_box {
        position: relative;
        height: 200px;
        width: 200px;
        border-radius: 25%;
        overflow: hidden;
    
        img {
          max-width: 100%;
        }
      }
    }
    
  • URL: /components/raw/profile_image/profile_image.scss
  • Filesystem Path: bits/03-pieces/profile_image/profile_image.scss
  • Size: 539 Bytes

Display the rounded box option for the profile image.