Hi,
I’m not able to set the size of the projects (image + caption).
I’m using ‘Display: Grid’ and sometimes (depending on the size of the screen) some image and caption have a different size.
I want them all to be the same size.
Here are some screenshots:
This is my code of this project so far:
Thanks in advance!
Challenge: Build a Personal Portfolio Webpage
Link to the challenge:
Images you are using have different high/width ratio, each of them will behave differently depending on container size.
The simplest solution is - if you want all the images to be same size, make all the images same size.
If you want to avoid editing images you could just try to define image sizes:
.project-tile img {
width: 100%;
height: 80%;
}
This will work, but some images will be stretched to fit the container.
If you want to avoid stretching images you could define their behavior using object-fit: cover, but then some parts of images will be cut off. Or try some other object-fit options.
(I am not sure if object-fit will work without creating separate image containers within image-tiles).
The answer to your question depends on how do you want the images of different sizes behave in same size containers.
Hi @32-622,
Unfortunately none of those solutions have worked for me. However I’ve found a way to sort it out using height:calc(); in .project-tile img
.project-tile img {
width: 100%;
height: calc(100% - 3rem);
object-fit: cover;
}
.project-tile p {
font-size: 1.1rem;
height: 3rem;
padding: 1rem;
}
This is my whole code so far: https://jsfiddle.net/lix__/31pnLmwu/
Many thanks anyway