html - 无法制作 3x3 网格照片
问题描述
我正在尝试制作一个包含 3 列和 3 行 (3x3) 的网格,但它就是不想工作。
我已经尝试从其他网站设置宽度、显示网格、内联网格复制代码,但没有任何效果。也不想失去图像的质量,但图像的大小都不同,如果我制作一个线性网格,图像的大小看起来会不同吗?我尝试的所有东西都不合适,否则我想知道该怎么做
@media screen and (min-device-width:698px) {
div#showgrid {
width: 698px;
margin: auto;
}
}
div.column {
border-style: solid;
border-width: 1px;
}
.row {
width: 100%;
margin: auto;
background: #d2c49b;
}
@media (min-device-width: 698px) {
.column {
width: 230px;
height: 230px;
display: inline;
float: left;
}
}
.column {
width: 230px;
height: 230px;
margin: auto;
}
<h2>Portfólio</h2>
<div class="myGallery"><div id="showgrid">
<div class="row">
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
</div>
<div class="row">
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
</div>
<div class="row">
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
<div class="column"><img src="photos/port/photo-1.jpg"></div>
</div>
解决方案
我确实重构了你的代码,你只需要设置自己的图像。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: serif;
}
h1 {
padding: 15px;
font-size: 3em;
}
.myGallery {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(3, minmax(50px, 1fr));
grid-template-rows: repeat(3, minmax(50px, 1fr));
grid-template-areas:
'photo1 photo2 photo3'
'photo4 photo5 photo6'
'photo7 photo8 photo9';
gap: 5px;
}
figure.column {
position: relative;
}
figure.column:nth-of-type(1) {
grid-area: photo1;
}
figure.column:nth-of-type(2) {
grid-area: photo2;
}
figure.column:nth-of-type(3) {
grid-area: photo3;
}
figure.column:nth-of-type(4) {
grid-area: photo4;
}
figure.column:nth-of-type(5) {
grid-area: photo5;
}
figure.column:nth-of-type(6) {
grid-area: photo6;
}
figure.column:nth-of-type(7) {
grid-area: photo7;
}
figure.column:nth-of-type(8) {
grid-area: photo8;
}
figure.column:nth-of-type(9) {
grid-area: photo9;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
background-position: center;
}
figcaption {
position: absolute;
top: 0;
color: white;
}
<h1>Portfólio</h1>
<div class="myGallery">
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
<figure class="column">
<img src="http://www.downgraf.com/media/2014/12/Conceptual_photography_of_Caras_Ionut-7.jpg" />
<figcaption>Title</figcaption>
</figure>
</div>
推荐阅读
- android - Android TV:焦点移至 ScrollView 中的视图,该视图位于 ScrollView 的可见部分之外
- neural-network - 了解卷积层中的特征图 (PyTorch)
- python - Pymodm:ImportError(两个模型相互引用)
- sql - 如何在 Oracle SQL 中使用 row_number()
- laravel - Laravel Nova 获取 Action 中选定条目的数量
- visual-studio-2017 - Visual Studio 2017 不断请求 jsconfig / tsconfig / node_modules
- javascript - 标签中的自定义 Web 组件事件回调函数
- macos - 使用特定小数在 Mac 上批量重命名文件
- python - Average of a series, skipping element[0]
- r - 带空括号的 dplyr::mutate_all 调用函数