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:

Have more questions? Submit a request


Powered by Zendesk