Easily Make Elementor Images the Same Height (Object Fit)
Vložit
- čas přidán 18. 04. 2021
- Do you struggle to make images the same height in Elementor? Check out this obscure option with the Elementor image widget which will save tons of time and make images way easier - even when clients upload odd sizes!
The feature is called Object Fit and can only be found on images when a height is set.
Don't have Elementor Pro? It's crazy cheap for the value. Get Elementor Pro (we may get a small kickback for teaching and referring): bit.ly/elementor-kg
Your video was a lifesaver for me! I was wasting time resizing and cropping my images until I saw your fix. Thank you!!
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%;
}
Absolutely wonderful! I was doing the images thesame as you and this video saves so much time and work! Thank you for this video! I was going crazy with one particular image, no matter what I did I still had the error of the size of this image and now it's fixed!!!
thank you for this! i was getting so frustrated and couldn't find any other tutorials that solved my problem, but this work and is super simple
Thank you! It was driving me crazy trying to get one of my images to bend to my will -- when changing the size of the browser window the image would leap out of the horizontal 2 column layout and change to full size instead of scaling down and staying where it should.
You're the man!! Been struggling with this issue for some time now. Really appreciate your video, sir!
Very happy to see this video helped you.
Exactly what I was looking for! Very, very useful. Thank you, sir! :)
I was having the *SAME* problem and was SO frustrated lol. Thanks for explaining how to fix this! Much appreciated!
Sure thing! Thanks for the comment.
Thanks so much! I have been having fits over this for so long.. This was a game changer for me.
😃
Spot on, been struggling with this for the last 3 hours and you saved the day.
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.
I actually found EXACTLY what I was looking for this time. Thank you!
Ha ha, great! Happy this helped. If you subscribe I promise to keep making exactly what you are looking for. ;-)
Omg, this took me hours and it's actually so easy! Thanks a LOT!
Thank you so much! This was such a quick, to the point and easy fix for a problem I've been irritated about :)
Great, thank you - I wonder why this is not mentioned anywhere?! You saved my day.
Dude you just saved me so much time thanks a lot. Legend
Very helpful, thanks for demonstrating!
I cannot tell you how happy this makes me! thanks for posting.
Making you happy makes me happy!
this is the first youtube comment i've ever left because your solution is AMAZING. this problem has driven me crazy for ever. thank you
This is great! Thanks for commenting, and happy this helped.
Thanks a lot. Exactly, what I was looking for. However, the relative width settings (%) didn't work for me. I had to set the width to an absolute pixel value (px) for this trick to work.
Oh my! I have been using margin and padding to do this and it takes way too long. Thank you so much for this very useful tip!!!!
I hope it helps. May not be perfect, but seems easier than some alternatives.
Cool tip, Brian! Thanks for sharing!
Thanks for this video. I have been looking for a better way to solve this for years. How did I not realise it was built in.
OMG. This has been driving me crazy. Totally not obvious how this works from the widget. Thank you!!!!!!!!!!!!
Very happy to see this helped another human!
This helped! I was trying to find a solution to this for a LONG time, and you helped me solve it in just a few minutes.
Happy to see this!
It's a useful feature, when the img has a subject matter centred, BUT if you have, say a left aligned subject, the img becomes cropped off.
e.g if you have a rectangle container on its side and the subject matter is far left of the full width img, then this feature pushes the subject out of view as you scale down to tablet and mobile.
Agreed, this requires thoughtful selection of imagery which is friendly to some cropping along edges.
Set it on "Cover" and Center-Left align.
Thank you. Exactly what I was looking for :)
omg....i have been learning WP and Elementor Pro for 1 week now. I've watched tons of video tutorials and for a feature that; in my opinion a need to know....just hasn't been explained correctly or shown step by step until now by you. thank you so much. 🙏🙏🙏🙏Im not a code writer but i consider myself tech savvy.
Before discovering your channel today I would open 2 screens and try to follow the video while working in elementor editor on my website. I have deleted page after page in the set up because I think that start fresh again.
In my opinion I think some channels dont show and tell all, that's not fair to the customer like me. 🤔 We buy these products for a reason dont we? and that's to get inspired and creative. Any thanks again from expat in Vietnam
Happy to see this helped another person! Thanks for leaving a comment.
You justs posted pure magic! Thank you so much for the share! I did not want to start searching for another plugin just for images and all. Thanks again
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?!"
Exactly what I needed! many thanks!
Well… the problem here comes when you need to put something over the image. In a listing it might not be a serious problem on putting a tag or title over with z-index and absolute podition, but in a hero image you could have problems with menu or hero texts.
Thank goodness I found this video! This was driving me crazy
EXACTLY what I needed!
Thanks. So nice and so simple :)
Thank you! My pictures were fine in Elementor but not on my phone and it was driving me nuts and wasting so much time!!! Looking all good now :)
😎
Finally! My life just got better :-) Thanks!
This was really useful. Trying to avoid as many plugins as possible.
thanks. i want to scale the pics bigger or smaller
Fabulous. BUT i was using dynamic images and then - no height ??? So tried adding normal image and then using tool icon to pull in the dynamic image and then, presto it’s exactly as you said. I was doing CSS to make it work. Thank you!!!!
thank you! this also solves the problem of equal height feature not working in loop builder!
exactely! one of those tips saving a lot of time and frustration ;)
Thank you for this great tip!!
very simple, thank you
This just solved my problem.... thank you very much!
Wow! Life saver! Thank you so much!
Thank you very much you made my life easy. Thanks once again!
Perfect! Thanks for sharing.
Thank you very much. This solved my problem.
Wow!! I have built over a hundred elementor sites and this completely blew my mind. I am laughing at myself for completely overlooking this. Thanks for pointing out the obvious for us all.
Same thing happened to me!
Fantastic! Finally found a solution to my photo image issues.
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.
Yes, you made my day. Thanks!
Really good finding!
you're the man. Thank you for this!
Absolutely. Have a great day.
Thank you - this helped me
Great! I didn´t know it too, Thanks!
Lifesaver video - thank you!
Awesome! Thank you!
EXCELLENT. Thank you
Looking for something that helps me deal with the fact that my website size changes depending on the monitor size used. I have a larger, 26" monitor and the monitor on my 15.5" laptop. When I get the dimensions looking great on one, they look wonky on the other.
I have been able to get this working before but honestly, I don't remember what I was doing a while back when I got it sorted on a previous site. Any insight into how you can get a hero image that fits on any size monitor, that'd be much appreciated!
The main challenge I'm having is that I have an H1 title I want in the center, and a banner with a transparent background at the bottom of the hero image that provides additional info.
So whenever I get the H1 text in the center, the bottom text is under the fold - yet when i bring that up, the H1 text is either all the way at the top, or smushed together with the banner.
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.
awesome tutorial, thx and god bless u, regards from hong kong ^_^
Thansk , finally, spent a few hours trying to find fix this issue before going to bed, not knowing I was only a google search away.
😂 all the time.. bed right before the answer
This was money. Thank you!
Thanks so much for this
Perfect! thanks so much!
Cool tip. I can't believe that i missed this before.
Same here!
Thank you very much!
I do not see it there... I got Spacing, Width, and Border Radius and then Hover Animation... I am exhausted trying to make these pics the same high
OMG!!!! You dont know how I searched like hell. Afcourse my english isnt good enough to make the right search words but man!! This is something!!!
I'm very glad to see this helped Rafal. Thanks for the message!
Most grateful King Grizzly. Thank you
Why can I not see the Height option in Image? I can only see Spacing and Width
saved my hours thanks
Man!! This was Awesome 😍 Thanks alot
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.
Thanks ! made my day too !
Still beneficial years later, thank you!
Has it been years already?! 😱
@@KingGrizzly lol only a couple 🙂
@@treepocket2834 Ha ha. Feels like I just made that video. Time flies.
Thanks so much!! I was losing soooo much time with this!!!!
Super useful thanks a lot!
Very happy to help. Thanks for the comment.
Thank you!!!
You are a life saver and this worked perfectly! I was just about to give up and why is it so hard to figure out Elementor?! I think I'm on day 10 of trying to figure out how everything works!
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!
thanks a lot brother
Dude, thank you.
This. Is. GREAT! Really this is super helpfull! Now by any chance, could you explain how to add a link to this image? Because as soon as you add a link the layout is gone and starts acting like a normal image again...
I just had the same problem and was wondering if you figured out how to fix it. Thank you!
Your video was really helpful and the first result Google provided for my search today. But I realized that as soon as I added a link to the image the layout was gone and reverted to a cropped image to fit the height but not the width. Any solutions/ideas for that?
I'm having trouble reproducing this. Are you using sections or containers? How about a theme?
after 1 hour of trial, error, and irrelevant google search results...finally! king grizzly for the win! thanks man!
Excellent! Happy this helped.
thank you!!!
super thank you for this
OMG!!! Lifechanging tip! Thank you!
Ha ha, happy to see this!
Thank you soooooo much!!!!!!!!!
Thanks! You saved me hours of frustration… 👌😎👌
Thanks for the note Chet. Have a great week.
You made my day.
You made my afternoon. 🙂
Great tip
thanks
You are a GENIUS! Thank you!!!!!
Ha! If only this were the case. Thanks for the note!
How would I align the bottom of the images if they were placed below the text? While still having the top of the text aligned too.
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".
Excellent!
thank you! i've been doing it wrong for so long..
thank you so very much
Hi, did you know how to align the picture? So align top/bottom or even select, which part of the picture is shown, which is cropped? Thx!
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?
what an amazing discovery
Thank You So Muchhhhhh
There is some kind of bug with this .... when I use this feature and want a dynamic link (Post URL) on the image the object fit doesn't work :-(
Is there any solution to this?
Thanks from Copenhagen
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!
omg... thank you so much :D
Awesome! Thanks. Years of pain solved.
you're literally the goat
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.