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/
thnx for these links really helpful.
You can do it by just changing the images width and height to Auto, I have attached OML for you reference,
Regards,
Komal