План сетки - квадратная фотостена - PullRequest
Новая
       11

План сетки - квадратная фотостена

0 голосов
/ 03 марта 2020

Я пытался перестроить эту квадратную сетку: как создать гибкую квадратную сетку с помощью css -grid-layout

Это работает, пока я положить изображения в сетку элементов: Фото стены 

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
}

.square-container::before {
  content: '';
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  grid-row: 1 / 2;
  grid-column: 1 / 1;
}

.square-container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

/* Just to make the grid visible */

.square-container > * {
  background: rgba(0,0,0,0.1);
  border: 1px solid grey;
  opacity: 0.75;
}

.square-container > *:focus,
.square-container > *:hover {
  border: 1px solid blue;
  opacity: 1;
}

.square-container img
    { object-fit: contain; width:100%; height:auto; padding:0; margin:0; }

Как я могу вписать img-элементы во весь размер элемента grid? 

.square-container img { 
object-fit: cover; 
width:100%; 
height:100%;  
}

создает прямоугольник. Фиксированный grid-auto-rows: 15rem создает почти квадрат, но тогда я могу воздержаться от псевдоэлемента.

...