Responsive-images

Js library for responsive images

Getting started

Installation

• Download the latest release
• Clone the repository: git clone Clone
• Install: bower install Responsive-images

Before your closing tag add:

<script type="text/javascript" src="path-to-library/responsiveImages.js"></script>

Or by npm/yarn

  yarn add ajjya-responsive-images
  OR
  npm install ajjya-responsive-images

Then you can import:

  import 'ajjya-responsive-images';

Usage

Add attribute data-img-sizes to every image or tag with background image which needs to be responsive (Change size according to window width). The biggest image have to be without size, all others paths have sizes (image width). Sizes are separated with comma, image path and size are separated with space. Example with background:

<div data-img-sizes="biggest-image.png, big-image.png 1300, small-image.png 1000, smallest-image.png 768" data-img-sizes-webp="biggest-image.webp, big-image.webp 1300, small-image.webp 1000, smallest-imagewebp 768"></div>

Example with image:

<img data-img-sizes="biggest-image.png, big-image.png 1300, small-image.png 1000, smallest-image.png 768" />
<img data-img-sizes="biggest-image.png, big-image.png 1300, small-image.png 1000, smallest-image.png 768" data-img-sizes-webp="biggest-image.webp, big-image.webp 1300, small-image.webp 1000, smallest-image.webp 768"/>

Notice, No needance of src or backgroundImage style.