Image

Sometimes images take a moment to load, or fail to load altogether. That's why Kriyā comes with an image container that can have either a fixed dimension or a ratio so your layout doesn't break or jump around while rendering. For example:

<figure class="image is-4by3">
	<img src="/path/to/image.jpg" alt="">
</figure>

Sizes

There are 7 fixed square dimensions to choose from, like is-24x24. Or if you don't know the image dimensions but you know the ratio, you can use one of 5 ratio modifiers instead, like is-4by3. See the Modifiers table below.

Retina images

Because image containers have a fixed size or ratio, you can double the size of the image in it, so it looks crisp on retina and HD displays.

Captions

You can optionally add a short caption to your image. Align captions to the right or in the middle with is-centered or is-right modifiers.

Image
Here is an example caption.

<figure class="image is-16by9">
	<img src="/path/to/image.jpg" alt="">
	<figcaption class="image-caption">
		Here is an example caption.
	</figcaption>
</figure>