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

Variables

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


VariableTypeDefault value
$image-radiusunits50%
$image-thumb-borderborder1px solid $light-grey
$image-thumb-radiusunits6px
$image-thumb-paddingunits0.25rem
$image-tile-shadowbox-shadow0 5px 10px 0px rgba(0, 0, 0, 0.2)
$image-tile-radiusunits6px
$image-square-sizeslist'tiny-square' 48px,
'small-square' 96px,
'square' 128px,
'medium-square' 160px,
'large-square' 208p