Images

Documentation and examples for images, using lightweight styles and modifier classes.

Responsive Images

Images in Inkline need to have the .image class applied and are made responsive using the .-responsive modifier.

To achieve that, we apply max-width: 100%; and height: auto; to the image so that it scales with the parent element, without surpassing the image’s maximum native width.

Responsive image
<img src="../../../assets/images/placeholder-1000x400.jpg" width="1000" height="400" class="image -responsive" alt="Responsive image">

SVG Images and IE 10

In Internet Explorer 10, SVG images with .image.-responsive are disproportionately sized. To fix this, Inkline adds width: 100% \9; where necessary.

This fix improperly sizes other image formats, so we don’t apply it automatically unless the extension ends with .svg.

Fluid Images

Images in Inkline can be made fluid using the .-fluid modifier. To achieve that, we apply width: 100%; and height: auto; to the image so that it scales with the parent element.

Fluid image
<img src="../../../assets/images/placeholder-1000x400.jpg" width="1000" height="400" class="image -fluid" alt="Fluid image">

Image Thumbnails

You can use the .-thumbnail modifier to give an image a rounded 1px border appearance.

Thumbnail
<img src="../../../assets/images/placeholder-400x400.jpg" class="image -thumbnail" alt="Thumbnail">

Polaroid

Besides thumbnails, you can opt for a retro look having a larger bottom border using the .-polaroid modifier.

Polaroid
<img src="../../../assets/images/placeholder-400x400.jpg" class="image -polaroid" alt="Polaroid">

Image Alignment

Align images with the helper classes or text alignment classes. Block-level images can be centered using the ._margin-x:auto margin utility class.

Left floating image Inkline is making this image float on the left side of the text. Inkline provides you with useful helper classes for positioning page elements such as images. The text will flow to the right and underneath this image, something you will find useful when adding left or right aligned images to a blog article. It is common to also add a right and bottom padding to the image.

<p>
    <img src="../../../assets/images/placeholder-400x400.jpg" width="120" height="120" class="image _float:left" alt="Left floating image">
    Inkline is making this image float on the left side of the text. Inkline provides you with useful helper classes for positioning page elements such as images. The text will flow to the right and underneath this image, something you will find useful when adding left or right aligned images to a blog article. It is common to also add a right and bottom padding to the image.
</p>

Right floating image Inkline is making this image float on the right side of the text. Inkline provides you with useful helper classes for positioning page elements such as images. The text will flow to the left and underneath this image, something you will find useful when adding left or right aligned images to a blog article. It is common to also add a left and bottom padding to the image.

<p>
    <img src="../../../assets/images/placeholder-400x400.jpg" width="120" height="120" class="image _float:right" alt="Right floating image">
    Inkline is making this image float on the right side of the text. Inkline provides you with useful helper classes for positioning page elements such as images. The text will flow to the left and underneath this image, something you will find useful when adding left or right aligned images to a blog article. It is common to also add a left and bottom padding to the image.
</p>

Centered image
<div class="_text:center">
    <img src="../../../assets/images/placeholder-400x400.jpg" alt="Centered image">
</div>

Centered image
<img src="../../../assets/images/placeholder-400x400.jpg" class="_display:block _margin-x:auto" alt="Centered image">

Picture

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .image classes to the <img> and not to the <picture> tag.

...
<picture>
    <source srcset="../../../assets/images/placeholder-400x400.jpg" type="image/svg+xml">
    <img src="../../../assets/images/placeholder-400x400.jpg" class="image -fluid -thumbnail" alt="...">
</picture>