时间戳

首页 > 解决方案 > 网格布局 - 方形照片墙

css - 网格布局 - 方形照片墙

问题描述

我试图重建这个方形网格：how-to-create-a-flexible-square-grid-with-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 元素适合网格元素的整个大小？

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

创建一个矩形。固定grid-auto-rows: 15rem创建一个近正方形，但我可以弃权伪元素。

标签： csscss-gridphoto

解决方案

推荐阅读