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.gitGitHub
GitHub - om4rAb/Image-issue
Contribute to om4rAb/Image-issue development by creating an account on GitHub.
55 Replies
have you tried removing
height: 100vh or changing it to min-heightYes I have tried both
and none of them is working
whenever I set zoom to 100% I right comp grows and causes that problem
we gonna need more. make a codepen 🙂
can we join #voice-chat ? and I will share my screen
nah I'm not doing voice coms
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
wrong url :
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
it's a background-image 😉
object-fit is for img tags etc
Oooh I didn't know that ty
yeah I have done it but didn't work too
https://github.com/om4rAb/frontend-sportApp.git
see again pls
Still shows 404, is it set to private?
yeah maybe
can we join a #voice-chat
I will share my screen
no need to talk if you want
It'll be much easier for me to debug if I can at least clone it
Plus I have a call in 15minutes
I will try to put in a diff repo
Still a 404
That would work but you can't just make your existing repo public?
it is not mine sadly
GitHub
GitHub - om4rAb/Image-issue
Contribute to om4rAb/Image-issue development by creating an account on GitHub.
see now
it def should work
Yup that works, I'll clone it and check it out in a bit, busy atm
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
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
I hope so I really had enough headache these 2 days hhhhh
hope @Mannix checks it out
How do I get to the page? I have it build and I'm at the sign up page
choose-role
http://localhost:4200/choose-role
Thanks
It works for me?
Oh hold on it's because the right isn't 100% height I think
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
Okay I see, I had to zoom in by like 200% lol
no height on the right I let it that way yep
This looks to fix it
yeeah hhhh
But it still distorts (even without that fix css) when you open the dev tools
That's because of the
height: 100vh or the min-height: 100vhbut if you zoom like 90% the scroll bar will stay
You have the border on it that's why probably
Use outline for debugging since border adds the width to the element
the border just to see the limits
you can remove them
I just like to add them to see each elements limits
If you remove the border you're still getting a scroll bar?
lemme see
woooooooooooooow
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
thaaaaaaanks
why height and min-height both working at the same time
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
ok sorry take your time buddy
you made my day
Did you add display:block to the img ?
Im not using an img tag
Ah I see 😆
yep used background-image
property
why?
I thought the same thing but the image appears to be decorative anyway
why not use an image with lazy loading and low priority?
just add
alt="" and it is decorative now