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>
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>
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>
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>
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>
Square
There are 5 square modifiers available that are useful for creating things like icons, product images, avatars, and more.
-
is-tiny-square48x48px -
is-small-square96x96px -
is-square128x128px -
is-medium-square160x160px -
is-large-square208x208px
<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 Variables
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $image-radius | units | 50% |
| $image-thumb-border | border | 1px solid $light-grey |
| $image-thumb-radius | units | 6px |
| $image-thumb-padding | units | 0.25rem |
| $image-tile-shadow | box-shadow | 0 5px 10px 0px rgba(0, 0, 0, 0.2) |
| $image-tile-radius | units | 6px |
| $image-square-sizes | list | 'tiny-square' 48px, 'small-square' 96px, 'square' 128px, 'medium-square' 160px, 'large-square' 208px |