Having hard time making Image fits the height | not easy as you think

Hi, whithout futher ado I'm working on an Angular Project, explaining my problem: I have a parent component called choose-role and I have two children left and side components each one will take 50% of the page and then I will call them both on the parent comp. The right side has a form & the left side will show an image the problem is when the right side form gets a lil bit bigger the height of the page grows which lead to make the a small white part below the image not covered by the image Left side comp html code: <article></article> and its css: article { background-image: url("/Assets/Choose-role-image.png"); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; border: 2px solid green; } if there's anything I need to provide pls let me know or I even can join a voice chat and share my screen thank you in advance repo link if you wanna play with it: https://github.com/om4rAb/Image-issue.git
GitHub
GitHub - om4rAb/Image-issue
Contribute to om4rAb/Image-issue development by creating an account on GitHub.
No description
64 Replies
Mannix
Mannix2mo ago
have you tried removing height: 100vh or changing it to min-height
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
Yes I have tried both and none of them is working whenever I set zoom to 100% I right comp grows and causes that problem
Mannix
Mannix2mo ago
we gonna need more. make a codepen 🙂
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
can we join #voice-chat ? and I will share my screen
Mannix
Mannix2mo ago
nah I'm not doing voice coms
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
ok let me do a codepen or stackblitz ok hi can u do a clone pls for some reasons can't put the code on stackBlitz or codepen https://github.com/om4rAb/frontend-sportApp.git
roelof
roelof2mo ago
wrong url :
No description
vince
vince2mo ago
Just to make sure you've tried this, have you tried object-fit: cover? It won't take the full height of the container since it's trying to maintain its aspect ratio
Mannix
Mannix2mo ago
it's a background-image 😉 object-fit is for img tags etc
vince
vince2mo ago
Oooh I didn't know that ty
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
yeah I have done it but didn't work too https://github.com/om4rAb/frontend-sportApp.git see again pls
vince
vince2mo ago
Still shows 404, is it set to private?
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
yeah maybe can we join a #voice-chat I will share my screen no need to talk if you want
vince
vince2mo ago
It'll be much easier for me to debug if I can at least clone it Plus I have a call in 15minutes
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
I will try to put in a diff repo
roelof
roelof2mo ago
Still a 404
vince
vince2mo ago
That would work but you can't just make your existing repo public?
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
it is not mine sadly
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
GitHub
GitHub - om4rAb/Image-issue
Contribute to om4rAb/Image-issue development by creating an account on GitHub.
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
see now it def should work
vince
vince2mo ago
Yup that works, I'll clone it and check it out in a bit, busy atm
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
I really appreciate you bro thank you for giving some time into this so far I'm in day 2 of finding a sol of this problem lol @Mannix feel free to add remove anything if you think I'm doing wrong
vince
vince2mo ago
yea ofc! can't guarantee anything but I'll try haha mannix is definitely more seasoned than me so if I can't figure it out he probably can
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
I hope so I really had enough headache these 2 days hhhhh hope @Mannix checks it out
vince
vince2mo ago
How do I get to the page? I have it build and I'm at the sign up page
vince
vince2mo ago
No description
vince
vince2mo ago
Thanks It works for me? Oh hold on it's because the right isn't 100% height I think
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
btw just to let you know when my zoom is at 90% or 80% it works finnnnnne but once zoom is 100% then that white space below image appear and not getting covered
No description
vince
vince2mo ago
Okay I see, I had to zoom in by like 200% lol
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
no height on the right I let it that way yep
vince
vince2mo ago
This looks to fix it
No description
vince
vince2mo ago
min-height: 100vh;
height: 100%
min-height: 100vh;
height: 100%
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
yeeah hhhh
vince
vince2mo ago
But it still distorts (even without that fix css) when you open the dev tools
vince
vince2mo ago
No description
vince
vince2mo ago
That's because of the height: 100vh or the min-height: 100vh
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
but if you zoom like 90% the scroll bar will stay
vince
vince2mo ago
You have the border on it that's why probably Use outline for debugging since border adds the width to the element
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
the border just to see the limits you can remove them I just like to add them to see each elements limits
vince
vince2mo ago
If you remove the border you're still getting a scroll bar?
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
lemme see woooooooooooooow
vince
vince2mo ago
Great! Yea I'd still use some min-height of a px value though so that you don't get a weird distortion when you're in portrait / open dev tools. You'll have to do some fiddling though
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
thaaaaaaanks why height and min-height both working at the same time
vince
vince2mo ago
1 minute going to be in a call but basically min height just sets the minimum height and then height lets it take up available space I believe
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
ok sorry take your time buddy you made my day
clevermissfox
clevermissfox2mo ago
Did you add display:block to the img ?
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
Im not using an img tag
clevermissfox
clevermissfox2mo ago
Ah I see 😆
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
yep used background-image property
ἔρως
ἔρως2mo ago
why?
vince
vince2mo ago
I thought the same thing but the image appears to be decorative anyway
ἔρως
ἔρως2mo ago
why not use an image with lazy loading and low priority? just add alt="" and it is decorative now
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
well there's no specific reason can I do the lazyloading with background-image
ἔρως
ἔρως2mo ago
no not without javascript
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
If you can show me how please I'm on angular project
ἔρως
ἔρως2mo ago
i dont use angular but basically, you have to change the class after the page loads
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
I will try and search for that thank you for your infos Hi @vince have you faced before probelems with the panelClass of mat-select of Angular material
vince
vince2mo ago
I've never used Angular
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
nvm i made it work
Jochem
Jochem2mo ago
sorry if I'm misinterpreting this, but that sounds like a separate and unrelated question to the one from the start of the thread. Please make a new thread when you have a new issue, so others that have the same issue can have a hope of finding the answers you got also, definitely don't @ people just because they helped you before
omar_ab(@om4rAb)
omar_ab(@om4rAb)OP2mo ago
lol sorry Im causing a mess thank you

Did you find this page helpful?