Design comparison
Solution retrospective
Had some issues with the image shrinking when the page was resized. Even with both containers(image and text) set to 50% width and 100% height. i ended up setting a min-height on the image to keep it from shrinking. Is there anything else i could have done differently? I'd love to know.
Community feedback
- @UserAhmad2001Posted over 2 years ago
Hello Oshane π
If you want to keep the image from scaling down horizontally, you could use the css property object-fit like this :
-
object-fit: contain ;
in this state the top and bttom of the image will remain in place. -
object-fit: cover ;
in this state the right and left of the image will remain in place.
Try it out, If you have any questions, Feel free to ask
Marked as helpful1@Noid3ahPosted over 2 years ago@UserAhmad2001 i would have to add the image as a background-img correct?. I will give this a try, thanks!
1@UserAhmad2001Posted over 2 years ago@Noid3ah
If you add it as a
background-image
, you should use the css propertybackground-size: contain ;
orbackground-size: cover ;
, the above solution is used with the image elements, to achieve the same result.Fell free to do it however you like.
GOOD LUCKπ
1 -
- @correlucasPosted over 2 years ago
πΎHello Oshane, congratulations for your new solution!
I did this same challenge and I had many issues with the image resizing. My advice for your is to use
grid
because its better to manage everything, for example:You create this component with two columns with
max-width: 1110px;
(its the component size) andgrid-template-column: 1fr 1fr;
to create two columns automatic with 50% each. Doing that you don't need to manage the inner divs sizes and to manage the rest is really easy.Here's my solution link if you want to check how I built everything:
https://www.frontendmentor.io/solutions/stats-preview-card-comp-pure-css-custom-colors-and-gradient-text-I2kqEpQIPj
To add the exact same purple overlay effect for the image, matching the design files you can user,
filter
,background-blend-mode
ormix-blend-mode
(the best choice in my opinion). See the code belowimg { mix-blend-mode: multiply; opacity: 0.8;}
π I hope this helps you and happy coding!
Marked as helpful1@Noid3ahPosted over 2 years ago@correlucas Thanks a lot! I will try to get up to speed with grid as soon as possible. Would you recommend using grid in all scenarios?
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord