Images
Images in Inkline can be made responsive using the .image class and the .-responsive modifier class.
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.
<template>
<img
src="../../../assets/images/placeholder-1000x400.jpg"
width="1000"
height="400"
class="image -fluid"
alt="Fluid image"
/>
</template>
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.
Images in Inkline can be made fluid using the .image class and the .-fluid modifier class. To achieve that, we apply width: 100%; and height: auto; to the image so that it scales with the parent element.
<template>
<img
src="../../../assets/images/placeholder-1000x400.jpg"
width="1000"
height="400"
class="image -fluid"
alt="Fluid image"
/>
</template>
You can use the .image class and the .-thumbnail modifier class to give an image a rounded 1px border appearance.
<template>
<img
src="../../../assets/images/placeholder-400x400.jpg"
class="image -thumbnail"
alt="Thumbnail"
/>
</template>
Besides thumbnails, you can opt for a retro look having a larger bottom border using the .image class and the .-polaroid modifier class.
<template>
<img
src="../../../assets/images/placeholder-400x400.jpg"
class="image -polaroid"
alt="Polaroid"
/>
</template>
Align images with the helper classes or text alignment classes. Block-level images can be centered using the ._margin-x:auto margin utility class.
<template>
<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>
</template>
<template>
<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>
</template>
<template>
<div class="_text:center">
<img src="../../../assets/images/placeholder-400x400.jpg" alt="Centered image" />
</div>
</template>
<template>
<img
src="../../../assets/images/placeholder-400x400.jpg"
class="_display:block _margin-x:auto"
alt="Centered image"
/>
</template>
If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add
the .image class to the <img> and not to the <picture> tag.
<template>
<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>
</template>