Как сделать сетку CSS с изображениями, которые изменяются, чтобы заполнить хотя бы одно измерение его контейнера, но не ⇐ CSS

[Anonymous]

См. Пример ниже - текущая настройка показывает, что большинство изображений отрезаны, но я хочу, чтобы они выбирали размеры для сетки, так что все ячейки будут показаны. Если вы поменяете «1» и «6» в фрагменте CSS, вы увидите, что изображения все усаживаются (и поддерживают свои соотношения сторон), чтобы они соответствовали контейнеру 300x500. Как я могу получить одно и то же поведение, когда все изображения находятся в одном столбце?

Код: Выделить всё

.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;
}< /code>


[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]
[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]
[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]
[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]

[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]
[img]https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/795 ... mension-of