stack two images using CSS on mobile screens (solved)
3 days ago I started a Frontend Mentor project and quickly faced the problem found in the title. .
On top of the image cropping and stacking, I need the two images to expand together while not losing aspect ratio (or at the very least, not noticeably losing aspect ratio) and not move away from each other. Additionally, the combined image (or their container) must take up space so that the other elements around it don't overflow it.
My current solution achieves everything but the the phone image is bigger than the background image. It is a cursed piece of code that exploits the poor grid module into giving me a div with a background image (the non-phone image) where I then add an img tag with the phone image. My other attempts at using different position values managed to do the cropping and stacking, but they either had overflow problems or the two images expanded at different rates and moved away from each other.
I have considered skipping CSS altogether. It would've certainly been faster to use any image-editor to combine the two images. But it just feels like I'm missing something obvious here.
I'm not afraid of reading documentation if I think it will help me answer this question, so any MDN links, code demos, or tutorials explaining the concept as a whole is welcomed.
I have attached the two images I need to crop and stack and what the desired output is.
I have also attached my best current output.
The app is very much early on it's development, but I got a deployment site working in case anyone here would find that useful.
live site:https://front-end-easy-bank-landing-page-kwxqtl35d-themcnafaha.vercel.app/
link to component in question: https://github.com/TheMcnafaha/front-end-easy-bank-landing-page/blob/dev/src/components/NavBar/navbar.tsx
link to repo in general: https://github.com/TheMcnafaha/front-end-easy-bank-landing-page/tree/dev
On top of the image cropping and stacking, I need the two images to expand together while not losing aspect ratio (or at the very least, not noticeably losing aspect ratio) and not move away from each other. Additionally, the combined image (or their container) must take up space so that the other elements around it don't overflow it.
My current solution achieves everything but the the phone image is bigger than the background image. It is a cursed piece of code that exploits the poor grid module into giving me a div with a background image (the non-phone image) where I then add an img tag with the phone image. My other attempts at using different position values managed to do the cropping and stacking, but they either had overflow problems or the two images expanded at different rates and moved away from each other.
I have considered skipping CSS altogether. It would've certainly been faster to use any image-editor to combine the two images. But it just feels like I'm missing something obvious here.
I'm not afraid of reading documentation if I think it will help me answer this question, so any MDN links, code demos, or tutorials explaining the concept as a whole is welcomed.
I have attached the two images I need to crop and stack and what the desired output is.
I have also attached my best current output.
The app is very much early on it's development, but I got a deployment site working in case anyone here would find that useful.
live site:https://front-end-easy-bank-landing-page-kwxqtl35d-themcnafaha.vercel.app/
link to component in question: https://github.com/TheMcnafaha/front-end-easy-bank-landing-page/blob/dev/src/components/NavBar/navbar.tsx
link to repo in general: https://github.com/TheMcnafaha/front-end-easy-bank-landing-page/tree/dev
bg-intro-mobile.svg2.15KB
GitHub
Contribute to TheMcnafaha/front-end-easy-bank-landing-page development by creating an account on GitHub.
GitHub
Contribute to TheMcnafaha/front-end-easy-bank-landing-page development by creating an account on GitHub.
