Image Adapter Plugin Demo

This JavaScript plugin adapts an image to his parent element without cropping it.
By Worköholics.

Images from Unsplash

Getting started


Install with Bower

You can install image-adapter using Bower.

$ bower install image-adapter --save

Use the CDN

You can use GitHub CDN.

<script src="https://raw.githubusercontent.com/workoholics/image-adapter/master/dist/image-adapter.js"></script>

Download code

You can download the code here and enjoy it.

Usage

To use image-adapter add class img-adapter to your images.

<img class="img-adapter" src="images/test-image.jpg"/>

Horizontal image


Real image proportion

Horizontal image
in horizontal container

The horizontal image adapts to a horizontal container.

Horizontal image
in vertical container

The horizontal image adapts to a vertical container.

Vertical image


Real image proportion

Vertical image
in horizontal container

The horizontal image adapts to a horizontal container.

Vertical image
in vertical container

The horizontal image adapts to a vertical container.

Full width demo


Real image proportion

To view the demo please click here.