Elementor - Understand Elementor's Image Height Setting

Many of us focus on an Image's Width and Max-Width Setting, and we overlook how Elementor's Image Height Setting can prevent you having to duplicate and crop images when you need them to fit.
- Get Elementor Pro here --- trk.elementor.com/license
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@TheNaturalEnquirer]

Thanks for this! I was tearing my hair out trying to get proportionally sized dynamic images to display correctly.

[@oceanfrontmary]

Great approach Thanks!

[@Theblackchannel01]

Thanks squadron

[@franktielemans6624]

But you can add CSS to the image and use object-position. (dunno why this is not an option in the editor)
selector img {object-position: top center;}
That will align the image to the top when you use object-fit cover.

[@websquadron]

That's a good call too

[@welldesign.design.studio]

This helped, thanks! I was not aware of the object fit before.

[@mpctmedi]

thanks. helped a lot

[@RolandoRiley-xn9yl]

Excellent!

[@elewebdev]

Thanks for the clarification - I was having problems with this too 👍

[@websquadron]

No problem 👍

[@louisandphoebepetboutique]

Thank you amazing!

[@PiyushPrajapati-em3rh]

Thanks for the code snippet. i have tried this but this is not applying in case of Image box widget. it shows 0 for both height and width

[@user-zs1yk6ec9h]

there must be a better way than to change each image size one by one..?

[@tiagomontenegro5394]

Thaank you sooooo much

[@ldelmar3875]

Can I make the image fit the container height? I would like to use the Min hight of the Container to scale all my images.

[@websquadron]

Click on the image - go to Advanced - then click on Grow.

[@owenrees7544]

Why can I not see the height option in Image? Only shows spacing and width

[@websquadron]

In the style tab?

[@piermane6134]

Thank you so much for your help with all the clarification. Sincerely appreciate.
I made a composite image 1920 x 2160 which is exactly 2 FullHD screen size. I want to lay out completely as a background image. I am in Cover Mode I noticed that when I use the minheight and set it to 2160 the system crops on the side which is uncessary. I than go to zero and increase the min height the maximum allowed is 1440pixel, but the image is not complete on the background. As soon as I manually imput above 1440 it starts to crop on the side uncessarly. Is it possible to change that 1440pixel maximum min height value before it start cropping? Thank you for your help.

[@websquadron]

Have you set it as a cover or a contain.
Also the size you have won’t work for many screens unless they are viewing on that exact resolution

[@piermane6134]

@@websquadron Thank you for your answer; I have set it to cover. If I set, it will duplicate image. What size do you suggest I work a background panel to give me 2x the height of max width. Should i resize everything to be 1440 x 2880? is 100% width of 1440 better than 1920?

[@JanesBlignautInHD]

Could you do a video on images and layout shifts?

[@websquadron]

As in CLS? Yup got one coming out in June - but my advice for catching CLS is to run your site through wepagetest.org as it gives you a video that plays your website movement.

[@marleycunningham1672]

My section background images are getting cropped on the front end. Do you have a tutorial for that?

[@websquadron]

Is it due to the height or width?
Can you tell me the dimensions of your image and the size of the container or section they sit in?
Cover images can crop so maybe try contain.

[@marleycunningham1672]

@@websquadron Thanks for the reply! On my homepage, I have a section with a testimonial carousel. I have tried adjusting the image size a few different times thinking that was the issue, but no luck. I am unsure where exactly to view or set the section's dims; the layout section in the elementor panel only allows you to set the width of the content within the section, from what I can tell.
I am currently using a 4500x1664 image as the background in my section. I tried scaling back the pixels, but it just looks blurry when I do. In the Elementor editor, everything looks great. But when I go to preview, the top and bottom of the image are cut off. Padding does help expose some of the image, but makes the section too thick. I did attempt to use contain, but it makes the section boxed in the middle of the page rather than stretching it the full width.

[@websquadron]

Can you email me the full image and screenshots of what you see on editor and then on live. Also email me the url for that page.

[@redharleymn]

Great Video but how to I close the gap between the thumbnail & product information?

[@websquadron]

Have you tried inspecting it to get the class name?

[@redharleymn]

@@websquadron I'm new to Elementor and not sure what you're asking

[@websquadron]

@@redharleymn It's for all Websites and not just Elementor. Right Click and then click Inspect. Or try this with SiteOrigins CSS Plugin to modify: th-cam.com/video/T_zmLYLCkM4/w-d-xo.html

[@RodMayberry]

I'm having issues with getting small logos in a carousel. They show up enormous on mobile!

[@websquadron]

Are you sizing them in the style, or with some CSS?

[@websquadron]

Maybe try an @media code for the CSS Sizing.

[@keaton718]

I wish there was a "max height" setting.

[@websquadron]

You could add some CSS:
selector {
max-height: 50px;
}

[@keaton718]

@@websquadron I think I'd sooner use Bricks. Though I can't get bricks to work with Simply Static, so yeah maybe I will try that CSS.