Hello. I wonder if anyone can help me. I am trying to get the image below to fit the container it is in. I have fiddled with most settings, but cannot get it to resize to the container. If I get rid of the image and turn on the background image, it works and fills the container! I just need the image to change its size based on what is in the text container. I must be missing something obvious? Any ideas?
Whilst you’re waiting for someone to come back to I’ll ask @elementsbot to help.
Hey Gary! To make your image fit the container, try using the Image Component’s sizing options. Set the width to “Full” to make it fill the container. If that doesn’t work, check if any CSS classes are affecting the image size.
Remember, I’m just a bot and can sometimes hallucinate, so if you’re still stuck, feel free to ask the Realmac Team or the community for more help!
1 Like
I have tried what elementsbot suggested and that did not work. Putting 100% on the image height should make the image fill the container height but it makes no difference. I have tried it with Flexbox and grid setups, no go, I’m stumped!
@dan it is then!
I could be that the aspect ratio is what is preventing it from filling the area.
Hello. No, I have changed the aspect ratio, tried all settings, no go. Thanks for the help.
not sure if this is what you meant
For phone I would put text under photo otherwise its difficult to read text?
that is the responsive way to do this
laws of physics something has to accommodate the space either text size or image size or width of container etc
Im unresponsive, it’s the end of the weekend!
1 Like
Meant to say you are correct not sure why this way was needed
1 Like
You could also use a Background component and set it to Cover and it would fill the entire area. But this would be at the expense of seeing all of the image.
I have added h-full to the advanced box and various other classes, but still no difference. The thing is I can do this easily using EtchWP in WordPress, just plain CSS, by setting height to 100% on the image, then the image will fill the container. I’ll have another go at it in the morning. Thanks everybody for your help.
Had another crack at it this morning. Just adding a background component onto a grid works as I want, but not using an image component. Creating a HTML as “upssjw” had done works!
Is it a limitation of the image component?
this can be done with a custom class, add the following to the Advanced→CSS Classes:
[&_img]:h-full
You’ll then want to adjust the Aspect Ratio so the image isn’t stretched. You’ll obviously get some clipping of the image as you’re stretching it to fill the entire column. Hope that helps 
1 Like
Yes! That worked. I had my image in another flex wrapper, as soon as I took it out and added the class, it then worked, but does not work if inside another flex or container.
Thanks for your help and for all the hard work the Realmac Software team is doing to make Elements the best it can be.
2 Likes