I can't set the size of an element with CSS in Personal Portfolio Webpage (solved)

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:
https://jsfiddle.net/lix__/ashwubft/

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