question to automatically create images for Responsive design
hello,
i have a question to our post
https://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design
i tried to use it in my bootstrap.
in the header is the cloudinary.js and the jquery javascript.
But i cant see the picture.
https://codepen.io/handyaner/pen/rJdQBg
on the body end is <script type="text/javascript">$.cloudinary.responsive()</script>
you can see the hole code here https://codepen.io/handyaner/pen/rJdQBg
-
Hi Nikolai,
Please refer to this basic example:
http://jsfiddle.net/roee_ba/t78xn7ax/
(Just set your cloud_name and api_key where needed).
Let me know if this helps?
0 -
hello thanks
ok i see a picture.
maybe i understand this responsiv feature wrong?
if i edit the width to 10%, the delivered image is still 900px wide
the div is just 84px wide.
i thought in this case the picture should be 84px wide.
0 -
Hi Nikolai,
The sample project requires no changes rather than setting your cloud name and API Key. In the sample I've shared, when you extend the image space, Cloudinary then loads a new derived image, with bigger width, in accordance with the image's HTML wrapper element.
In addition, note that Cloudinary doesn't necessarily load an image with the exact width of its wrapper but uses pre-defined breakpoints (default is 100px steps). These breakpoints protect your account fro generating too many derived images, which counts towards your Transformation quota.
0
Post is closed for comments.
Comments
3 comments