See example below - the current setup shows most of the images being cut off, but I want them to select sizes for the grid such that all cells will be shown. If you swap the '1' and '6' in the snippet CSS, you will see the images all shrink (and maintain their aspect ratios) to fit within the 300x500 container. How can I get the same behavior when all the images are in a single column?

.container {
  min-height: 500px;
  min-width: 300px;
  max-height: 500px;
  max-width: 300px;
  background: lightBlue;
  //padding: 10px; 
  overflow: hidden;
}

.grid {
  display: grid;
  max-height: 100%;
  grid-template-columns: repeat(1, minmax(1px, 1fr));
  grid-template-rows: repeat(6, minmax(1px, 1fr));
  
  // The above expands the images to match the width of the container, and then sets their
  // height based on the original aspect ratio - most items are not visible (i.e., the images
  // are expanding out of the grid container)
  // if you swap the '6' and '1' above, the images will correctly shrink to fit in their container,
  // at the largest aspect ratio that is supported
  
  
  //padding: 10px;
  background: green;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  //padding: 5px;
  background: red;
}

<div class="container">  
  <div class="grid">
    <img src=".jpg" />
    <img src=".jpg" />
    <img src=".jpg" />
    <img src=".jpg" />
    
    <img src=".jpg" />
    <img src=".jpg" />
  </div>
</div>

See example below - the current setup shows most of the images being cut off, but I want them to select sizes for the grid such that all cells will be shown. If you swap the '1' and '6' in the snippet CSS, you will see the images all shrink (and maintain their aspect ratios) to fit within the 300x500 container. How can I get the same behavior when all the images are in a single column?

.container {
  min-height: 500px;
  min-width: 300px;
  max-height: 500px;
  max-width: 300px;
  background: lightBlue;
  //padding: 10px; 
  overflow: hidden;
}

.grid {
  display: grid;
  max-height: 100%;
  grid-template-columns: repeat(1, minmax(1px, 1fr));
  grid-template-rows: repeat(6, minmax(1px, 1fr));
  
  // The above expands the images to match the width of the container, and then sets their
  // height based on the original aspect ratio - most items are not visible (i.e., the images
  // are expanding out of the grid container)
  // if you swap the '6' and '1' above, the images will correctly shrink to fit in their container,
  // at the largest aspect ratio that is supported
  
  
  //padding: 10px;
  background: green;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  //padding: 5px;
  background: red;
}

<div class="container">  
  <div class="grid">
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
  </div>
</div>

• css

2 Answers 2

Simply define width and height instead of using min/max on the container

.container {
  height: 500px;
  width: 300px;
  background: lightBlue;
  overflow: hidden;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-rows: repeat(6, minmax(1px, 1fr));
  background: green;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  background: red;
}

<div class="container">  
  <div class="grid">
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
  </div>
</div>

You need to specify a height for your .container.

const s = []
for (let i = 0; i < 36; i++) {
  s.push(`<img src="https://cdn.pixabay/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />`)
}
document.querySelectorAll('.grid').forEach(g => {
  g.innerHTML = s.join('')
})

.container {
  width: 80vw;
  height: 80vh;
  background: lightBlue;
  overflow: hidden;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  background: green;
  gap: 2px;
}

img {
  max-height: 100%;
  max-width: 100%;
  background: red;
}

.cropped img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 66% top;
}

<div class="container">  
  <div class="grid"></div>
</div>

<p>or if you want the images to crop automatically</p>
<div class="container cropped">  
  <div class="grid"></div>
</div>