Demo Cloudimage.io Responsive

Change your browser's windows size to simulate a smaller screen, images will be automatically adapted:

Quickstart

Download and include cloudimage.io-responsive.js
<script src="{path to the file}/cloudimage.io-responsive.js"/></script>

Initialize jScaler with your token information
document.addEventListener('DOMContentLoaded', function() {
  jScaler.process({
    TOKEN: 'your token'
  });
});
Working example

For <img>:

<img ci-src="http://sample.li/boat.jpg"
  ci-type="cover"
  ci-size="{xs: '50x100', sm:'100x125', md: '150x150', lg:'200x175', xl:'300x200'}" ci-responsive>

Also works for background:

<div ci-img-background="//sample.li/boat.jpg" ci-responsive></div>

Any questions?

Contact us at hello@cloudimage.io, our image resizing experts will be happy to help!