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 Images

<img src="..." 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 Images

<img src="..." 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.

Image Thumbnails

<img src="..." 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 Image

<img src="..." 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.

Image Alignment - Float Left

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.

<img src="..." class="image _float-left" alt="Left floating image">

Image Alignment - Float Right

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.

<img src="..." class="image _float-right" alt="Right floating image">

Image Alignment - Text Center

<div class="_text-center">
    <img src="..." alt="Centered image">
</div>

Image Alignment - Margin Auto

<img src="..." 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="..." type="image/svg+xml">
    <img src="..." class="image -fluid -thumbnail" alt="...">
</picture>

Sass Variables

Here you can find a list of the Sass variables you can use for images. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.