Here's a bonus which may help you. Install this helper CSS and then use the classes on your images to get desired proportions. So, for example, click on an image widget and under the Advanced > Class field enter one of the following such as ratio-4-3. Perfect proportions. The CSS includes object-fit cover so you can probably set a height or max-width and be fine. /* Image sizing based on ratio */ /* Square */ .ratio-1-1 img { aspect-ratio: 1 / 1; object-fit: cover; max-width: 100%; } /* Landscape Orientation */ .ratio-3-2 img { aspect-ratio: 3 / 2; object-fit: cover; max-width: 100%; } .ratio-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; max-width: 100%; } .ratio-5-4 img { aspect-ratio: 5 / 4; object-fit: cover; max-width: 100%; } .ratio-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; max-width: 100%; } .ratio-1-91-1 img { aspect-ratio: 1.91 / 1; /* FB social share */ object-fit: cover; max-width: 100%; } /* Portrait Orientation */ .ratio-2-3 img { aspect-ratio: 2 / 3; object-fit: cover; max-width: 100%; } .ratio-3-4 img { aspect-ratio: 3 / 4; object-fit: cover; max-width: 100%; } .ratio-4-5 img { aspect-ratio: 4 / 5; object-fit: cover; max-width: 100%; } .ratio-9-16 img { aspect-ratio: 9 / 16; object-fit: cover; max-width: 100%; }

Agreed, this requires thoughtful selection of imagery which is friendly to some cropping along edges.

Set it on "Cover" and Center-Left align.

exactely! one of those tips saving a lot of time and frustration ;)

😂 all the time.. bed right before the answer

Sure thing! Thanks for the comment.

Glad this helped, Jason. If you need to align the image vertically (other than center), see some of the other comments here about using some CSS to do so.

Very happy to see this video helped you.

This is great! Thanks for commenting, and happy this helped.

😎

I just had the same problem and was wondering if you figured out how to fix it. Thank you!

Same thing happened to me!

Very happy to see this helped another human!

I hope it helps. May not be perfect, but seems easier than some alternatives.

Has it been years already?! 😱

@@KingGrizzly lol only a couple 🙂

@@treepocket2834 Ha ha. Feels like I just made that video. Time flies.

Happy to see this helped another person! Thanks for leaving a comment.

Making you happy makes me happy!

Same here!

Excellent! Happy this helped.

Just be mindful of cropping which can happen when using the 'cover' setting. This tends not to work well on very wide images if you are trying to put in people. For example, heads can get cropped.

It gets better! They just added an object fit dropdown which lets you choose how you want to align each image (center/left, center/center, left/bottom, etc).

@@KingGrizzlyI just tested it and saw those options. It felt like opening gifts on Christmas morning 😅

@@aymericzambo1914 Ha ha! Yeah, that's how I felt. "Where have you been all my life image feature?!"

Ha ha, great! Happy this helped. If you subscribe I promise to keep making exactly what you are looking for. ;-)

Keep learning! Once you get the hang of it, you can build just about anything using Elementor.

@@KingGrizzly ok will do and thank you again for the information and please keep the videos coming!

Happy to see this!

I figured one out. Set the width to a pixel value larger than you need but then set the max-width to 100%. This fixed it for me!

Hard to know without looking, but some thoughts to try... Try a vertical or % height on your section/container as well as your image height. Or: A section/container background image set to cover may work best for this particular spot. Set padding on the section and then place the h1 and banner inside it. Contents of a section or column can be set to vertically center middle.

Thanks for the note Chet. Have a great week.

Absolutely. Have a great day.

I'm very glad to see this helped Rafal. Thanks for the message!

You made my afternoon. 🙂

Happy it helped. Stay tuned, we've got some exciting videos coming out over the next month or two. Should make using Elementor easier and faster.

I'm having trouble reproducing this. Are you using sections or containers? How about a theme?

Not sure if you are using sections or containers. If sections, select an image, go to the Advanced tab and set a width of 33% (or something similar). Does that help?

If you set the image to "cover", it will be centered. If you set it to "contain", all of the image will show but the images will only fill the space in equal proportions if they are sized the same when uploaded. Aligning a "cover" image differently would probably require a CSS override if that's even possible.

@@KingGrizzly css for an img within a container can be as follows: img{object-position:center;} Attach it to the container the img sits within. You then have options for alignmnet based on the subject and visual layout of the img

@@surfssupwatersports Great tip! So the object-position could be changed from center to another value?

Not sure on the specifics of your layout, but you may be able to select the container and set the vertical align to "space between".

If you are using 'cover', Elementor doesn't provide a way to align the image - it is always center center. However, you can align the image with some CSS. For example, I write some helper classes in my CSS such as: .of-top img { object-position: top; } .of-bottom img { object-position: bottom; } My adding one of my classes, like 'of-top' to the image widget under the Advanced > Class tab, I'm able to align the image. You can experiment with the object-position values as well. For example: object-position: bottom left; Hope this helps!

@@KingGrizzly Thank you for your reply. I can't use the "Custom CSS" option in Elementor as a free user. I'm just testing how to create my 1st website in Wordpress, so I don't feel like investing $ in any plugin for now. I'll look for another plugin to better edit the images, or look for another way to edit the website CSS so I can try using your tip.

If you add an HTML widget to the page, you can add your custom CSS there. This should also work with the free version of Elementor.

@@KingGrizzly The "object-position" property you mentioned helped, thanks. I had to use the browser's object inspector to find the class of the image which I wanted to change the alignment. With the image class name ("wp-image-1849" in my case here), I then added an HTML element to the page and edited the CSS style. .wp-image-1849 { object-position: 0 28%; } I had to research about how to use the "object-position" property and mess with some CSS editing, but I wanted something more practical and faster do accomplish. I'll try WIX later but I'll keep using WordPress. I'll install and test more WP plugins, although I've seen WP has some security issues related to 3rd party plugins and they won't support your site if it's hacked.

@@marcusguimaraes2105 Another option would be to size the images precisely before uploading and skip using the height setting altogether. Sometimes this is asking too much from certain clients though.

Ha ha, if only! However, I'm working on a global font styling demo and accompanying CSS clamp tool which might make people happy. Should release it in the next week or two. :-) Happy coding.

Very happy to help. Thanks for the comment.

Nice to be needed!