Can I control breakpoints behavior with Cloudinary's responsive design support?

When utilizing the jQuery based responsive feature, breakpoints can be controlled in several aspects using the following parameters:

  1. breakpoints:
    A function or set of values to be used as breakpoints for delivery of a new larger image when the document is being resized. For example (Also default):
    defaultBreakpoints = function(width) {
     return 100 * Math.ceil(width / 100);
    };
    width - the current width of the containing element

  2. responsive_use_breakpoints:
    'true' (default) - always use breakpoints for width (e.g. ...,200,300,400,500,...)
    'resize' - use the exact width of the containing element on initial render, then proceed with breakpoints.
    'false' - always use exact containing element's width

Those parameters should be passed to the Cloudinary config() method.
A code example is available here

For more information regarding Cloudinary's responsive capabilities see:
http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design

Have more questions? Submit a request

Comments

Powered by Zendesk