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>
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.
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.
You can optionally add a short caption to your image. Align captions to the right or in the middle with
<figure class="image is-16by9"> <img src="/path/to/image.jpg" alt=""> <figcaption class="image-caption"> Here is an example caption. </figcaption> </figure>