How to make <div> fit image width
Hey there, I need help with this weird problem I have(see screenshots). I am trying to justify-content with these flexbox images, but I can't because of these weird spaces between each images that end up taking all the spaces horizontally, which prevent me from justify-content. As you can see on the screenshot, I want to get rid of the red section, and make the div fit the image instead of overflowing until it touch the next images on the right. I joined my CSS code snippet, maybe it will help.
(I am quite new to web development and its my first time posting for help, so if the way I am asking my question or how I present my code snippet is not how it should be done, please guide me so next time I can ask using the good practice, thank you)
3 Replies
Heya Guys (Hopefully a Bezerk lover)! The way you've built it out, the image will always be 90% width of the div. Put width: 100% onto the image and now the image will be the same width as the parent div. To get a space between each image you can use the "gap" property where you apply display flex which is a shorthand for "column-gap" and "row-gap". This is standard for any kind of grid where you want space between each item ;9 Hope that helps!
Yep, it was exactly the solution to my problem. Thanks a lot Mimo! And yes, my name is in honor of Berserk 🫡
Poifecttt glad it worked and hellll yeaa Berserk is awesome 😉 Good luck on the rest of your project!