Angular responsive images to fit parent dimensions.

rtee

January 07, 2019 09:26

I've been looking around and read your articles on responsive images. I have this working for me in vertical scroll situations:

http://res.cloudinary.com/rtee-admin/image/upload/c_fill,w_auto,dpr_1.0/v1/public_id

 

The image I get is fine as its according to width of parent. But fails to incorporate height.

 

I was wondering if there is a solution for getting image to fit its parent's width and height. This would be helpful in grid layouts for web.

 

Thanks in advance.

0

• 

  Stephen Doyle

  January 07, 2019 12:14

  Hi,

  There isn't an option to automatically choose the height via the javascript method of automatically making responsive images, but if you're creating multiple versions for use in a srcset parameter via breakpoints, you could include different height options and have the browser choose one.

  With the use of w_auto only, you may not need to change anything in your design provided the images have the correct aspect ratio either naturally, or enforced via your transformations, because the height will implicitly be linked with the width and you can account for that in your design

  If you're using a grid layout, for example, you could enforce an aspect ratio of 1:1 and get all square images: http://res.cloudinary.com/demo/image/upload/c_fill,w_auto,dpr_1.0,ar_1:1,g_auto/v1/sample
  
  Please let me know if that helps, and if there's anything else I can help with

  0
• 

  rtee

  March 17, 2019 10:01

  Thanks so much. It did work for me. 

  Could not reply that time.

  Thanks.

  0

Post is closed for comments.