Images
Ani-Design provides a few ways to make your images responsive. The default style for an image is a square but you can change it with the .circular class.
Image Shape
<div class="image">
<img src="image.jpg" alt="A cool image" />
</div>
<div class="image circular">
<img src="image.jpg" alt="A cool image" />
</div>
Image Size
Images are available in 5 different sizes.
<div class="image circular xsm">
<img src="image.jpg" alt="A cool image" />
</div>
<div class="image circular sm">
<img src="image.jpg" alt="A cool image" />
</div>
<div class="image circular">
<img src="image.jpg" alt="A cool image" />
</div>
<div class="image circular lg">
<img src="image.jpg" alt="A cool image" />
</div>
<div class="image circular xlg">
<img src="image.jpg" alt="A cool image" />
</div>
Fluid Image
The fluid image can expand within its parent but can never get bigger. Drag to see the behaviour for yourself.
<div class="image fluid-img">
<img src="image.jpg" alt="A cool image" />
</div>