Generate responsive img tags with jquery

by Shirly Manor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.4.0/cloudinary-jquery-file-upload.min.js"></script>
<div id="text"></div>
<div id="image"></div>

CSS

#image{
  width: 30%;
}

img{
  width: 100%;
}

JavaScript

$.cloudinary.config({cloud_name: "jll-global-cmg"})
img = $.cloudinary.imageTag("sample", { transformation: [ 
{ width:"auto", crop: "fill", quality: "auto:eco"}, 
{overlay: "hh2clf8r4fg8v2sxeleo", width:"200",height: "265",gravity:"south_west"} 
]}).toHtml();


$('#text').text(img);
$('#image').append(img);

$.cloudinary.responsive();