How to make images (grid cells) of the same height?

HTML-CSS
1

See the Pen Tribute Page by Novum (@Novumel) on CodePen.

Hello! I’m doing my first project. I want to better understand the capabilities of the CSS Grid.
I placed 3 images in grid cells. I haven’t set up adaptability yet, but it looks like a convenient way.
Now I can’t solve the problem: different image heights. I thought that if the image is a grid cell, then it fills the cell along the entire height, and the images should be the same. But this doesn’t happen.
Tell me how to best solve this problem?

2 Likes
2

No, you generally need to set a [min-]height on the images to get them to expand (changing them to block layout then applying align stretch to them may also work, but I can’t check), then you need to ensure that then doesn’t cause problems like overlapping/escaping from grid area. It’s much easier if you make all the images the same size first, but I get that might be an issue.

Untested because I’m on mobile, but assuming all figure elements are in a grid layout

<figure>
  <img />
</figure>

figure > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%; // might be just `height` in this situation, can't remember
}

You’ve got text in there as well which is going to cause you issues so this will need quite a bit of fiddling with I think, I would probably move each text block out of the figure to a different grid area just below it for simplicity of styling

1 Like
3

Thanks for your answer!
Unfortunately, I don’t see a solution to the problem. The code you suggested is already on my page.
As for the text under the images, it doesn’t affect the size in any way, because it is a tag [figcaption].
Apparently, I’ll have to set the image size for all media queries. Only then it’s not clear what the feature of the Grid system is…

4

What i understand is that you have to get image size changed with respect to size of device
if so
img {
object-fit: cover;
width: 100%;
height: 100vh;
}

height: 100vh means set 100 percentage of view height with respect to the height of device. as you have three image
100/3=33.33
img {
object-fit: cover;
width: 100%;
height: 33vh;
}

1 Like
5

Thanks for the advice.
Yes, the images are the same in height, but the images are cropped :frowning:

33vh cover
33vh cover1035×443 540 KB
100vh cover
100vh cover1086×504 466 KB

6

can you share me link of code pen

7

See the Pen Tribute Page by Novum (@Novumel) on CodePen.

8
  1. First fill, stretch Image.
  2. Contain, maintain the aspect ratio of Image.
  3. Cover, you can fill the height and width of the box.
  4. None, must keep the original size.
  5. Scale-down, do comparison of differences between None and Contain to find the smallest object size.
9

I read about it, thanks. But this piece of information hasn’t helped yet.

10

As you told me it didn’t helped you, i had created an html page in my system. Then i found the it is working

<html>
<style>
height:33vh;
</style>
<div>
<Img src="fill path of image"/>
</div 
</html>

Create an html file in your system. And try this.

11

Edit your css file as follows
.image {
width: 100%;
height: 40vh;

display: block;
}

Screenshot_2020-02-01-20-19-06-403_com.android.chrome
Screenshot_2020-02-01-20-19-06-403_com.android.chrome720×1520 729 KB

12

Thank you for spending time solving this problem.
I tested this option on different screens. Yes, it turns out correctly, but only in one single case - on the screen 1014 1366. On the other screens it doesn’t look good.

1014 1366 . 35vh.PNG
1014 1366 . 35vh.PNG1213×549 275 KB

css 34vh
css 34vh464×622 14.7 KB

13

You want get it responsive.now i got your point! That part i didn’t think.
Don’t worry. We can sort it out. One more thing image will be too small in mobile phone screen if you want to reduce the size of image according to sreen width. Is that ok if image slide down according to the width of screen.
Now your image is

A A A
If it get slide down it will look like
A
A
A
For small view width sreen
For big view with sreen
Image look like
A A A
Is this okay?
Just represented image with Letter A

14

If you look at my media queries, you can see that I made this arrangement of images intentionally. This is the meaning of using the Grid system. The simplicity of changing the position of the cells attracted me. It seemed that there would be no problems with the size of the cell-images. But here a trap was waiting for me.

15

To make such arrangement no need of media query
grid-template-columns: repeat (auto-fill,minmax(60px,1fr))
grid-template-rows:1fr 1fr 1fr
Add this to image container class
That 60px you have to adjust with the require size you want
Refer free code camp challenge
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit

16

Thanks!
I read about the minmax function. It seems very promising, but I don’t understand how to apply it when placing grids in the grid.
What you wrote I put in my code, and nothing good came out again.
In addition, I use media queries so that on different screens the area of ​​the img-div grid is located differently: on some screens above, on others - from the side. Here minmax will not help me, I guess.

17

try this in your system
two different approach for same solution.
1)

<html>
<style>
.main div{
    display: inline-block;
}

@media (max-width:1200px) {
.main div{
    display: block;

}

}


</style>
<div class="main">
<div>
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>
<div>
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>
<div>
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>

</div>


</html>

<html>
<style>
.main {
    display: grid;
    grid-template-columns: repeat(3,1fr);
grid-template-rows: 1fr;
grid-template-areas: "first second third";
}
.one{

grid-area: first;
}
.two{
grid-area: second;
}
.three{
grid-area: third;
}

@media (max-width:1200px) {
.main{
    grid-template-areas: "first" "second" "third";

}




}


</style>
<div class="main">
<div class="one">
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>
<div class="two"> 
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>

<div class="three">
    
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div>

</div>


</html>

I visited the codepen. felt like you remove the image. put the image link back. we can sort it out. actually I was logging from my mobile as i was traveling.

18

Image is annoying, because they are not like other elements.
Basically if you wrap the image on div or figure, make sure that you define the wrapper element width and height too.
I hope this codepen sample help: https://codepen.io/padunk/pen/QWbLZrG?editors=1100

2 Likes
19

Hello!
Thanks. I’ve already set up adaptability.
The whole problem was only in the height of the image that covers the grid. I had to take all three photos of the same size in another editor. These are crutches.

20

Many thanks for the help!