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
GitHub
front-end-easy-bank-landing-page/src/components/NavBar/navbar.tsx a...
Contribute to TheMcnafaha/front-end-easy-bank-landing-page development by creating an account on GitHub.
GitHub
GitHub - TheMcnafaha/front-end-easy-bank-landing-page at dev
Contribute to TheMcnafaha/front-end-easy-bank-landing-page development by creating an account on GitHub.
5 Replies
@themcnafaha This was my take on this project, i'd probably do it differently now haha but maybe it can give you a nudge in the right direction.
repo
https://github.com/deerCabin/easybank-site
live site
https://deercabin.github.io/easybank-site/
GitHub
GitHub - deerCabin/easybank-site: A website layout created from a r...
A website layout created from a reference design. Contribute to deerCabin/easybank-site development by creating an account on GitHub.
thanks!
I've looked at your code an it did nudge me in the right direction. Will mark as solved
Awesome! What part helped you out?
After reading your solution I noticed it looked a lot like my current version. So it was easy to refactor my css to implement your hero-img and hero-bg-img css to get my own cropping done right while keeping the images stacked.
but if i had to do this all over again, I think i would just use a image processor instead of css lol
ah i'm glad it helped!
always good to practice the solution in css though, it helps you get knowledge.