Prevent upscaling responsive images

Follow

Micah Kohne

• December 24, 2017 15:06

Hello - wondering if there is a way to prevent upscaling when using responsive, dynamically generated images. For example, if I have a image that has a max height of 500px, I would want that image to have a responsive width as long as its height does not exceed 500px.

Thanks

0

• 

  Marissa Masangcay

  • December 27, 2017 22:15

  Hi Micah,
  
  Cloudinary supports conditional transformations for images where certain transformations are applied when a particular condition is met (or not met, depending on the logic). You can read more about and view examples of our conditional transformations in our documentation here:
  
  https://cloudinary.com/documentation/image_transformations#conditional_transformations
  
  However, as an example of the situation that you gave, here is a URL that adjusts the width of the image depending on if the image's height is greater than or less than 500px:
  
  https://res.cloudinary.com/demo/image/upload/c_limit,h_600/if_h_gt_500,w_300/sample.jpg

  In this URL I first specified the height so that you can play around with the height values and see the differences when the height is less than or greater than 500px. When the height is greater than 500px it then transforms the image to have a width of 300px.

  Please feel free to play around with the width and height values to get a feel of how it works. :)

  Hope this helps!

  0

  Comment actions Permalink
• 

  Micah Kohne

  • December 27, 2017 23:14

  Wow - this is so powerful. Thanks for the help Marissa.

  0

  Comment actions Permalink

Post is closed for comments.