Documentation and examples for images, using lightweight styles and modifier classes.
Images in Inkline need to have the
.image class applied and are made responsive using the
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.
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
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.
You can use the
.-thumbnail modifier to give an image a rounded 1px border appearance.
Besides thumbnails, you can opt for a retro look having a larger bottom border using the
Align images with the helper classes or text alignment classes. Block-level images can be centered using the
margin utility class.
If you are using the
<picture> element to specify multiple
<source> elements for a specific
<img>, make sure to add
.image classes to the
<img> and not to the
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.