I'm excited to share that there are now additional fitting options for Images: Fill, Fit, and Keep Aspect Ratio.
What's New?
You can now adjust how the image fits within its bounding box.
There are three options available:
Fill: Image fills it's bounding box. If the aspect ratio of the image is different than the aspect ratio of the image bounding box, the image will get cropped. (e.g. if you were to try to fit a rectangle inside a square)
Fit: Image fits within its bounding box. If the image aspect ratio is different than the aspect ratio of its bounding box, the image will shrink to fit within the bounding box. It will maintaining its aspect ratio without getting cropped. (e.g. like shrinking a rectangle to fit in a square shape).
Keep Aspect Ratio: If the image aspect ratio is different than the bounding box aspect ratio, the bounding box height will adjust to display the entire image.
These modes are useful to achieve different layouts, or if you want to link an image component to data, and make sure that the image doesn't get cropped even when the source changes
How to change fit modes?
Open the Image Settings Panel from the GFPP and change the fit mode.
Or use the Velo API to change the fit mode.
This works in Repeaters also. You can change the image fitting option for each item in Repeaters separately.
Enjoy and please share any feedback! 🌸
2 years since this feature was requested
Finally ! Thanks !
Better late than never
Boys, We did it. Thanks!
which of the three choices is the most appropriate one?
Hi,
Thanks for all these great updates.
What about the "scale proportionally" option in the inspector panel. It looks redondant now?
When we choose Fill or Fit...
... and we select scale proportionally it's like choosing "keep aspect ratio"
Or I messed something :)
Thank you Carmel. I was able to test this out and I've made a video for anyone who wants to see a video of the different modes and how this feature helps while building out your site:
Wow! Wonderful!!