Fixing Height of Responsive Breakpoints

Mojtaba

October 22, 2019 09:45

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

• 

  Michal Kuperman

  October 26, 2019 20:43 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

Post is closed for comments.