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
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
Fluid image

Image Thumbnails

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

Image Thumbnails
Thumbnail

Polaroid

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

Polaroid Image
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
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.
Image Alignment - Float Right
Left 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.
Image Alignment - Text Center
Centered image
Image Alignment - Margin Auto
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.

Image Alignment - Margin Auto
<picture>
    <source srcset="..." type="image/svg+xml">
    <img src="..." class="image -fluid -thumbnail" alt="...">
</picture>