Image

A flex container for images

The image class can be used to turn an element into a flex container for managing the layout and sizing of your images.

<div class="image">
  <img src="https://orbitcss.com/img/square.png" />
</div>
Copy

Style

Round

The is-rounded modifier will round the image by giving it a border radius of 50%.

<div class="image is-rounded">
  <img src="https://orbitcss.com/img/square.png" />
</div>
Copy

Thumbnail

Using the is-thumbnail modifier will give the image a padded and rounded border.

<div class="image is-thumbnail">
  <img src="https://orbitcss.com/img/square.png" />
</div>
Copy

Tile

The is-tile modifier can be used to give your image a tile-like appearance.

<div class="image is-tile">
  <img src="https://orbitcss.com/img/square.png" />
</div>
Copy

For rounded corners you can use the is-rounded-tile modifier.

<div class="image is-rounded-tile">
  <img src="https://orbitcss.com/img/square.png" />
</div>
Copy

Square

There are 5 square modifiers available that are useful for creating things like icons, product images, avatars, and more.

• is-tiny-square 48x48px
• is-small-square 96x96px
• is-square 128x128px
• is-medium-square 160x160px
• is-large-square 208x208px

<div class="image is-tiny-square">
  <img src="https://orbitcss.com/img/square.png" />
</div>

<div class="image is-small-square">
  <img src="https://orbitcss.com/img/square.png" />
</div>

<div class="image is-square">
  <img src="https://orbitcss.com/img/square.png" />
</div>

<div class="image is-medium-square">
  <img src="https://orbitcss.com/img/square.png" />
</div>

<div class="image is-large-square">
  <img src="https://orbitcss.com/img/square.png" />
</div>
</> Show code
Copy

Custom sizes

The imageBoxSize() mixin can be used to create custom sizes for the image element.

.image {
  &.is-ratio-2-1 {
    @include imageBoxSize(600px, 300px);
  }
}
Copy

CSS variables

You can override the default styles for the image elements using CSS variables.

.image {
  --border-radius: 0;
  --border-color: transparent;
  --border-width: 0;
}

.image.is-thumbnail {
  --border-width: 1px;
  --border-color: var(--color-light-grey);
  --border-radius: 6px;
  --padding: 0.25rem;
}

.image.is-rounded {
  --border-radius: 50%;
}

.image.is-tile, .image.is-rounded-tile {
  --box-shadow: 0 5px 10px 0px hsl(0deg, 0%, 0%, 0.2);
}

.image.is-rounded-tile {
  --border-radius: 6px;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.