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.
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.
Image Thumbnails
You can use the .-thumbnail modifier to give an image a rounded 1px border appearance.
Polaroid
Besides thumbnails, you can opt for a retro look having a larger bottom border using the .-polaroid modifier.
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.
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.
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.
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.