Skip to main content

Profile image

Overview

.env-profile-image will always give you a centered image. Use modifiers for size:

env-profile-image--xx-large, env-profile-image--x-large, env-profile-image--large, env-profile-image--medium, env-profile-image--small, env-profile-image--x-small, env-profile-image--xx-small

Fixed size

Using the class directly on the IMG tag will make the image fixed size. If the containing element is smaller, the image will overflow.

<div class="example-profile-images">
   <div data-demo-size-fixed data-demo-size="256px">
      <img
         class="env-profile-image env-profile-image--xx-large"
         src="https://envisionui.io/placeholders/text/xxl.png"
         alt="Example profile image xx-large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="224px">
      <img
         class="env-profile-image env-profile-image--x-large"
         src="https://envisionui.io/placeholders/text/xl.png"
         alt="Example profile image x-large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="128px">
      <img
         class="env-profile-image env-profile-image--large"
         src="https://envisionui.io/placeholders/text/l.png"
         alt="Example profile image large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="96px">
      <img
         class="env-profile-image env-profile-image--medium"
         src="https://envisionui.io/placeholders/text/m.png"
         alt="Example profile image medium"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="64px">
      <img
         class="env-profile-image env-profile-image--small"
         src="https://envisionui.io/placeholders/text/s.png"
         alt="Example profile image small"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="48px">
      <img
         class="env-profile-image env-profile-image--x-small"
         src="https://envisionui.io/placeholders/text/xs.png"
         alt="Example profile image x-small"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="32px">
      <img
         class="env-profile-image env-profile-image--xx-small"
         src="https://envisionui.io/placeholders/text/xxs.png"
         alt="Example profile image xx-small"
      />
   </div>
</div>

Responsive size

Using a wrapper element will make the image resize if the element containing the image is smaller than the image.

<div class="example-profile-images example-profile-images--resizeable">
   <div
      class="env-profile-image env-profile-image--xx-large"
      data-demo-size-inside
      data-demo-size="256px"
   >
      <img
         src="https://envisionui.io/placeholders/text/xxl.png"
         alt="Example profile image"
      />
   </div>
</div>

Status badge in responsive size Profile image

A responsive size Profile image may have a Status badge inside. The text will be visually hidden and the badge will adjust its size relative to the image.

<div class="example-profile-images example-profile-images--resizeable">
   <div class="env-profile-image env-profile-image--xx-large">
      <img
         src="https://envisionui.io/placeholders/profile/400x400/02.webp"
         alt="Example profile image"
      />
      <p class="env-status-badge env-status-badge--active">Logged in</p>
   </div>
</div>

Envision documentation