Image fitting in css grid-CodePudding

I am not really familiar with HTML and CSS and I am having some problems with fixing my problem.

I am trying to fit the picture excatly on the grid and the grid to be visible in the center of the page which actually it is.

I saw that there are a lot of questions about this and I tried to look at the answers the questions got and try to fix my problem but it was actually not working. So I hope anyone can help me with this.

Thank you in advance for your time.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item"><img src="6.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="3.png" class="img"> </div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="7.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="4.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="8.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="9.png" class="img"></div>  
      </div>
</body>
</html>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
}
.grid-item > img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

CodePudding user response：

Okay you can do it like this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
  position:relative;
}
.grid-item > img {
  width: 100%;
  object-fit: cover;
  display: block;
  object-fit: cover;
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
}

So in this case, you are placing img to be absolute and to have height and width same as grid-item. But then you will add object-fit which will make image fit nicely inside grid-item.

CodePudding user response：

From what i understand you are trying to center the grid, there are multiple ways you can do this though, im not sure what your looks like. Im not sure if its loading any CSS or not at all doing anything. If you wanted to you could make a div with everything in it and do something like:

.grid {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

I hope this helps, although your question is a bit unclear to me }

CodePudding user response：

Here I have used aspect ratio. Please update below css in your code. I hope this helps for your requirement

.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding-bottom: 100%;
  text-align: center;
  position: relative;
}
 .grid-item > img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

}

CodePudding user response：

Instead of using .grid-item > img {} I would just define it as a class (since you're telling it, it has a .img class. Further, remove padding and use height:100%

.img {
  max-width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  display: block;
}