Hey fellow coders,
Some time ago I finished my portfolio project but I never shared it with others for feedback which I would appreciate.
Also one thing I found I struggle with is the sizing of images inside the html elements. I am having trouble making the image become the size of the div element. In my website the image is bigger than the element it is placed in so only the top part of it shows. I tried making it smaller but I could not find an adequate size for it. Are there any guides on working with images in css?
Thank you for your help.
Good work dude. One thing you could make it better is the nav, when I click in one of the links it scrolls me to the correct section but the nav is in top of the title of the section. Definitely a small thing but it’s a good learning experience.
About the image you can use the background-size property. I’ve tested with the “contain” and the “cover” values and both looks a lot better.
Hey thank you for the advice. I will go work into it.
edit: I understand the problem better now. If I use contain attribute for the background-size it will scale the image to fit, but since it also wants to maintain the scale of the image (so it looks good), the problem that arises is that since my div is wider it will repeat the image horizontally because it cannot stretch to the width and maintain the scaling. If I use no-repeat then it will just place the image one time and it won’t fit the whole div.
When I used cover it will stretch the image wide to fit but to maintain the image looking good it will leave the height looking how it is originally so I will only see the top part.
So I guess the solution is to use an image that looks good in the wide proportions of my div.