Profile image

Added in 8.2

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="256px">
      <img
         class="env-profile-image env-profile-image--xx-large"
         src="https://placehold.it/256x256.png/ccc/000?text=XXL"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="224px">
      <img
         class="env-profile-image env-profile-image--x-large"
         src="https://placehold.it/224x224.png/ccc/000?text=XL"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="128px">
      <img
         class="env-profile-image env-profile-image--large"
         src="https://placehold.it/128x128.png/ccc/000?text=L"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="96px">
      <img
         class="env-profile-image env-profile-image--medium"
         src="https://placehold.it/96x96.png/ccc/000?text=M"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="64px">
      <img
         class="env-profile-image env-profile-image--small"
         src="https://placehold.it/64x64.png/ccc/000?text=S"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="48px">
      <img
         class="env-profile-image env-profile-image--x-small"
         src="https://placehold.it/48x48.png/ccc/000?text=XS"
         alt="Example profile image"
      />
   </div>

   <div data-demo-size="32px">
      <img
         class="env-profile-image env-profile-image--xx-small"
         src="https://placehold.it/32x32.png/ccc/000?text=XXS"
         alt="Example profile image"
      />
   </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">
   <div
      class="env-profile-image env-profile-image--xx-large"
      data-demo-size="256px"
   >
      <img
         src="https://placehold.it/256x256.png/ccc/000?text=XXL"
         alt="Example profile image"
      />
   </div>
   <div
      class="env-profile-image env-profile-image--x-large"
      data-demo-size="224px"
   >
      <img
         src="https://placehold.it/224x224.png/ccc/000?text=XL"
         alt="Example profile image"
      />
   </div>

   <div
      class="env-profile-image env-profile-image--large"
      data-demo-size="128px"
   >
      <img
         src="https://placehold.it/128x128.png/ccc/000?text=L"
         alt="Example profile image"
      />
   </div>

   <div
      class="env-profile-image env-profile-image--medium"
      data-demo-size="96px"
   >
      <img
         src="https://placehold.it/96x96.png/ccc/000?text=M"
         alt="Example profile image"
      />
   </div>

   <div
      class="env-profile-image env-profile-image--small"
      data-demo-size="64px"
   >
      <img
         src="https://placehold.it/64x64.png/ccc/000?text=S"
         alt="Example profile image"
      />
   </div>

   <div
      class="env-profile-image env-profile-image--x-small"
      data-demo-size="48px"
   >
      <img
         src="https://placehold.it/48x48.png/ccc/000?text=XS"
         alt="Example profile image"
      />
   </div>

   <div
      class="env-profile-image env-profile-image--xx-small"
      data-demo-size="32px"
   >
      <img
         src="https://placehold.it/32x32.png/ccc/000?text=XXS"
         alt="Example profile image"
      />
   </div>
</div>