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?
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.
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!
You’re not loading an image here, named portfolio1.jpg. This image is not in you github images folder.
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.
@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.
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.