Auto fit images inside a container
Question
Application Type
Mobile

Hi,

I need to add two containers one below other. I want to add an Image on the top container and some text in the bottom container, like a product details page.

I set the top container to 40% of screen and bottom container to 60%. But the image is going out of the container and overlaps with the bottom container. Is there a way to enforce the maximum height to the image without distorting the image. Like for example, i put 100% height in the image properties and it looks like really stretched and doesnt look good

Thanks

Yes there are many ways to achieve this, some of them keeping the image's width and height ratio, others sticking to the container's size.

Check this first, since it'd be a waste to try to explain here in a less complete way that they've covered in this article:


https://css-tricks.com/almanac/properties/o/object-fit/

https://css-tricks.com/on-object-fit-and-object-position/


Komal Kumbhar

Hi,

You can do it by just changing  the images width and height to Auto, I have attached OML for you reference,

Regards,

Komal

FitImagesDemo.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.