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.

Example profile image xx-large
Example profile image x-large
Example profile image large
Example profile image medium
Example profile image small
Example profile image x-small
Example profile image xx-small 
<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.

Example profile 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.

Example profile image

Logged in

<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