JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js">
</script>

<span>Img tag has width, data-width (explicitly) and parent width. w_300 requested but is scaled to 100px again due to the img tag width. If img width didn't exist then it would scale to div tag width (200px)</span>
<div style="width:200px;">
<img style="width:100px;" data-width="300" class="cld-responsive" data-src="https://res.cloudinary.com/oxford-online-pharmacy/image/upload/w_auto,c_scale,q_auto,f_auto,t_oop_watermark/meda-elleste-solo-1mg-1-box.jpg">
</div>




<script type="text/javascript">
    var cl = cloudinary.Cloudinary.new({cloud_name: "demo"});  
    cl.responsive();
</script>