Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 网格布局-方形照片墙_Css_Css Grid_Photo - Fatal编程技术网
Fatal编程技术网
  • css/
  • Css 网格布局-方形照片墙

Css 网格布局-方形照片墙

css

Css 网格布局-方形照片墙,css,css-grid,photo,Css,Css Grid,Photo,我试图重建这个方形网格： 在我将图像放入网格元素之前，它一直有效： .square容器{ 显示：网格； 网格模板列：重复（自动填充，最小值（15rem，1fr））； 网格自动行：1fr； 网格自动流动：稠密； } .方形容器：：之前{ 内容：''； 宽度：100%； 身高：0； 垫底：100%； 网格行：1/2； 网格柱：1/1； } .方形容器>*：第一个子容器{ 网格行：1/1； 网格柱：1/1； } /*只是为了让网格可见*/ .方形容器>*{ 背景：rgba（0,0,0,0.1）； 边

我试图重建这个方形网格：

在我将图像放入网格元素之前，它一直有效：

.square容器{
显示：网格；
网格模板列：重复（自动填充，最小值（15rem，1fr））；
网格自动行：1fr；
网格自动流动：稠密；
}
.方形容器：：之前{
内容：''；
宽度：100%；
身高：0；
垫底：100%；
网格行：1/2；
网格柱：1/1；
}
.方形容器>*：第一个子容器{
网格行：1/1；
网格柱：1/1；
}
/*只是为了让网格可见*/
.方形容器>*{
背景：rgba（0,0,0,0.1）；
边框：1px纯灰；
不透明度：0.75；
}
.square container>*：焦点，
.方形容器>*：悬停{
边框：1px纯蓝色；
不透明度：1；
}
.方形集装箱img

{object fit:contain；width:100%；height:auto；padding:0；margin:0；}
检查您的链接，这是您的本地文件urlThank-更正它-在一篇较旧的文章中找到了解决方案：.square container>a{position:relative；}.square container>*：focus.square container img{位置：绝对；顶部：0；左侧：0；对象匹配：覆盖；宽度：100%；高度：100%；}太好了！但我认为您不需要这个零件
。方形容器>*：焦点
，是吗？