gpt4 book ai didi

html - 如何使用完全环绕主图像的 flexbox 创建图像网格?

转载 作者:太空宇宙 更新时间:2023-11-04 13:08:31 28 4
gpt4 key购买 nike

我想创建一个图像网格,首先有一个大的特色图像,然后在它的右边,有一个 4 个网格(每行 2 个).. 然后在它下面,一次 4 个图像的行。

松散地基于 this design .

我认为 flexbox 可能会解决这个问题。

假设我有一些这样的标记

 <div class="image-grid">
<div>
<img src="https://unsplash.it/1024/1024">
</div>
<div>
<img src="https://unsplash.it/1000/800">
</div>
<div>
<img src="https://unsplash.it/1100/1000">
</div>
<div>
<img src="https://unsplash.it/1120/1000">
</div>
<div>
<img src="https://unsplash.it/1130/1024">
</div>
<div>
<img src="https://unsplash.it/1101/1024">
</div>
<div>
<img src="https://unsplash.it/1020/1024">
</div>
<div>
<img src="https://unsplash.it/1021/1024">
</div>
<div>
<img src="https://unsplash.it/1002/1024">
</div>
<div>
<img src="https://unsplash.it/1003/1024">
</div>
<div>
<img src="https://unsplash.it/1004/1024">
</div>
<div>
<img src="https://unsplash.it/1005/1024">
</div>
</div>

使用 CSS

.image-grid {
display: flex;
flex-wrap: wrap;
}

img {
width: 100%;
}

.image-grid > div:first-child {
flex-basis: 50%;
}

.image-grid > div {
flex-basis: 25%;
}

几乎 做了我需要它做的事。代码笔here .

不过我需要修复两件事...

  1. 在特色图片的右侧显示 4 张图片,而不是当前的 2 张。
  2. 拉伸(stretch)每张图片以适应其空间,使其成为一个紧密的网格(任何图片周围都没有间距)。我正在考虑使用 object-fit CSS 属性,但我还没有让它工作。

谢谢。

最佳答案

所以我认为最简单的方法是使用像 Foundation 这样的框架来创建顶行,然后使用 flexbox 来创建其余部分。

<div class="row">
<div class="medium-6 columns featured-image">
<img src="https://unsplash.it/1023/1024">
</div>
<div class="medium-6 columns featured-image-grid">
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1024/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1022/1024">
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1021/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1020/1024">
</div>
</div>
</div>
</div>

<div class="image-grid">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
<img src="https://unsplash.it/1020/1022">
<img src="https://unsplash.it/1020/1021">
<img src="https://unsplash.it/1020/1029">
<img src="https://unsplash.it/1020/1028">
<img src="https://unsplash.it/1020/1027">
<img src="https://unsplash.it/1020/1023">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
</div>

使用 CSS

.row {
max-width: 100%;
margin: 0 !important;
}

.columns {
padding: 0;
}

.featured-image img {
height: 400px;
}

.featured-image-grid img {
height: 200px;
}

img {
object-fit: cover;
width: 100%;
}

.image-grid {
display: flex;
flex-wrap: wrap;
}

.image-grid > img {
flex-basis: 25%;
height: 200px;
width: auto;
}

代码笔 here .

它需要做一些工作才能使其具有响应性,但它​​可以满足我的需要。

关于html - 如何使用完全环绕主图像的 flexbox 创建图像网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36713948/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com