How to use automatic image width with optimal responsive breakpoints with the JS library?

Comments

1 comment

  • Avatar
    Eyal Katz Talmon

    Hey Mateo, 

    Below is a basic example of implementing the responsive layout using Cloudinary's jQuery SDK -

    $.cloudinary.imageTag("myphoto")
    .dpr("auto").responsive(true).width("auto").crop("scale")

    Let me know if you need further assistance with the jQuery implementation.

    We do not have a solution that combines both Client-Hints one and the JS one. At this moment, the recommended way to go for implementing a responsive layout is using the JS solution (which essentially our SDKs also make use of).

    If for some reason you do not wish to make use of our JS solution, you can use the Client-Hints solution, paired with a specification of a default value for the width. This value is used as a fallback, in the following manner - In a case where the Client Hints solution is not supported for the client browser, the breakpoint will be calculated according to that value. this behavior can be achieved by setting the width to the following - 

    w_auto:breakpoints:<fallback value>

    You can read more about this solution here.

    0
    Comment actions Permalink

Please sign in to leave a comment.