动态呈现图像多行多列
Presenting images dynamically multirow multicolumn
我想在网页上展示大约 20 张图片。图像可以纵向或横向。我想在更大的屏幕上以每行 3 个的方式构建它们,在手机上减少到每行 1 个,对于 tablet-like 设备可能每行 2 个。但布局也可能取决于视口的方向。我有这些要求:
- row-height 应该是该行中任何照片的最大高度。例如:两张人像照片和一张风景照片排成一排,行高就是人像照片的高度。
- 风景照片应放在其单元格的中央,并在 top/bottom 上留空 space。
- 人像照片应该占满他们的单元格。
- 列应在可用宽度(33.33%、50% 或 100% 屏幕宽度)上平均分配。
- 我还希望页面能够响应,即图像必须 shrink/enlarge 取决于浏览器屏幕 width/height。
- 每张照片的标题位于图片顶部正下方的图片中心,以显示计数器或小的描述性文本。
我读过很多文章,但不使用 table-solution,而是使用 div-solution。任何帮助将不胜感激。
body {
margin: 0;
padding: 0;
}
.gallery {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.gallery > li {
flex-basis: calc(100% / 3);
display: flex;
align-items: center;
justify-content: stretch;
}
@media (min-width: 768px) and (max-width: 1024px) {
.gallery > li {
flex-basis: calc(100% / 2);
}
}
@media (max-width: 767px) {
.gallery > li {
flex-basis: calc(100% / 1);
}
}
.gallery > li > figure {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
margin: auto;
}
.gallery > li > figure img {
max-width: 100%;
height: auto;
display: block;
order: 1;
}
.gallery > li > figure figcaption {
order: 0;
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
text-align: center;
position: absolute;
}
<ul class="gallery">
<li><figure><img src="https://picsum.photos/g/200/300?image=0" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=10" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=20" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=30" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/300/300?image=40" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=50" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=60" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/200/300?image=70" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=80" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=90" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=100" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=110" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/200/300?image=120" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=130" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=140" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=151" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=160" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=170" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=180" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=190" alt=""><figcaption>This is a caption</figcaption></figure></li>
</ul>
我想在网页上展示大约 20 张图片。图像可以纵向或横向。我想在更大的屏幕上以每行 3 个的方式构建它们,在手机上减少到每行 1 个,对于 tablet-like 设备可能每行 2 个。但布局也可能取决于视口的方向。我有这些要求:
- row-height 应该是该行中任何照片的最大高度。例如:两张人像照片和一张风景照片排成一排,行高就是人像照片的高度。
- 风景照片应放在其单元格的中央,并在 top/bottom 上留空 space。
- 人像照片应该占满他们的单元格。
- 列应在可用宽度(33.33%、50% 或 100% 屏幕宽度)上平均分配。
- 我还希望页面能够响应,即图像必须 shrink/enlarge 取决于浏览器屏幕 width/height。
- 每张照片的标题位于图片顶部正下方的图片中心,以显示计数器或小的描述性文本。
我读过很多文章,但不使用 table-solution,而是使用 div-solution。任何帮助将不胜感激。
body {
margin: 0;
padding: 0;
}
.gallery {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.gallery > li {
flex-basis: calc(100% / 3);
display: flex;
align-items: center;
justify-content: stretch;
}
@media (min-width: 768px) and (max-width: 1024px) {
.gallery > li {
flex-basis: calc(100% / 2);
}
}
@media (max-width: 767px) {
.gallery > li {
flex-basis: calc(100% / 1);
}
}
.gallery > li > figure {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
margin: auto;
}
.gallery > li > figure img {
max-width: 100%;
height: auto;
display: block;
order: 1;
}
.gallery > li > figure figcaption {
order: 0;
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
text-align: center;
position: absolute;
}
<ul class="gallery">
<li><figure><img src="https://picsum.photos/g/200/300?image=0" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=10" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=20" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=30" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/300/300?image=40" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=50" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=60" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/200/300?image=70" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=80" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=90" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=100" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=110" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/g/200/300?image=120" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=130" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=140" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=151" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/200?image=160" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/200/300?image=170" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=180" alt=""><figcaption>This is a caption</figcaption></figure></li>
<li><figure><img src="https://picsum.photos/300/300?image=190" alt=""><figcaption>This is a caption</figcaption></figure></li>
</ul>