Help with professional portfolio

Project Feedback
#1

Hey guys! I’m making a portfolio to help me get a job. I found a bunch of images that were unequal in size and I fixed them with the code below to make them equal.

    float: left;
    width: 100px;
    height: 100px;
    object-fit: cover;
}. ```



But now i need the images to equally increase in size till they touch each other and cover the page, could you please tell me how I might do with this?
#2

Hello @codeofdreams! I am not sure I fully understand what you want. I feel as though your request doesn’t provide enough details.

I’m going to take my best stab at this based off what I think you’re looking for.

So let’s say I have 9 images all different sizes. I want to evenly distributed them out on one page. One way to do this is with css grid.

#imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(33vh, 33vh);
 
}

#imgs img {
  width: 100%;
  height: 100%;
}

Here would be the html for that

<div id=“imgs”>
<img>9 images here
</div>

Because I went with 9 images I chose 3 columns. Then I set the grid-auto-rows to have a min and max height of 33 of the viewpoint height. So 3 pictures per row each gets about 1/3 of the screen.

Even though the images are really big I have them set to 100% of the <div>..

You may need to change some parameters to fit your needs.

Hopefully that helps.

EDIT: I should add that if this is what you’re looking for and you have an un-even amount of images to fill the whole grid you can use span to have some of them cover more grids.

Here’s my pen demonstrating (I added more images now) https://codepen.io/jfirestorm44/pen/oNbayNa

1 Like
#3

Thank you, I will check this out.

#4

https://codeofdreams.github.io/My-Professional-Portfolio/

Could you look at this? It might help you to understand what i’m talking about. Thank you.

#5

Do you have a specific question regarding the grid?

Like @jfirestorm4 said, I would also recommend a CSS grid to build your layout. I would try to create the layout first, test if it fits your needs and come back after you have a working grid to talk about the next steps!

1 Like
#6

I already have a grid created by my CSS. Am I wrong?

#7

Hey,

  1. You’re not loading an image here, named portfolio1.jpg. This image is not in you github images folder.
  2. The images you’re loading are huge and you’re displaying a thumbnail-sized image.

Suggestion: read how to write a grid. For example, all you probably need is:

<img src="sourceHere/>
<p>Some text <p/>

Or even better

<figure>
<img src="sourceHere/>
<figcaption>Some text <figcaption/>
</figure>

Having such a complicated markup makes things difficult.

Crop the images the same aspect ratio, it would be enough to have 800px/800px

This is what I came up with. If it’s close to what you’re looking for, then take my previous suggestions and rewrite the markup, and then go back to ask for help if needed.

2
2801×486 387 KB

1 Like
#8

@codeofdreams also if you want to use the grid and do not want space betwen the photos then you can use something like this pen I made here

This will also allow you to keep you text but instead of it show up under it will show up over the photo. You of course will need to style this to your liking but the base is there. You could fade the whole image or just have it pop up over the pic.

I didn’t style it much at all.
Let me know if that works.

1 Like
#9

Thank you very much! I’m taking a short break as I feel a little sick, but I very much appreciate the help! I’ll get back to it soon.

#10

I realized that I am going at it all wrong and I’m starting over. Thank you for you help and helping me to think @jfirestorm4, @anon10002461, and @miku86. If you believe in prayers, pray for me. I’m about to change my whole life using code.

1 Like