This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Fixing Height of Responsive Breakpoints

Follow
Avatar
Mojtaba

Hello,

I have an image and I want to generate responsive breakpoints for that image. However, I want to have a fixed height for all scaled down images. That means the aspect ratio of the generated images are not the same as the AR of the original one.

I tried the following setting bu it generates different heights. Any idea how it would be possible?

"responsive_breakpoints": [
    {
      "bytes_step": 5000,
      "min_width": 200,
      "max_width": 1000,
      "max_images": 5,
      "transformation": {
        "crop": "fill",
        "height": "200"
      }
    }
  ]

My original image is 1200(w)*480(h), and I received five images: 200*80, 319*128, 411*164, 487*195, 500*200.

Regards,

Mojtaba

1

Comments

1 comment

Sort by Date Votes
  • Avatar
    Michal Kuperman
    • Edited

    Hi Mojtaba,

    When using the javascript method to automatically create responsive images, there isn't an option to choose the height.

    In your case, I suggest you create responsive images by using the `srcset` and `sizes` approach, where you can include the height transformation. 

    You can read more about this here: 

    https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary

    Hope this helps, please let me know if you need help implementing this.

    Thanks,

    Michal

    0
    Comment actions Permalink

Post is closed for comments.