Js library for responsive images
- 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';
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.