如何仅使用 flexbox 制作响应式图像网格?
How can I make a responsive image grid using only flexbox?
我正在开始我的第一个完整网站项目,我已经学习 HTML 和 CSS 大约一个月了,我刚刚完成了 flexbox 的基础知识学习。我想知道是否可以创建一个图像网格,其中图像会随着浏览器 window 仅使用 flexbox 调整大小时自动调整大小,我目前只知道这些。
我想重新创建的是 this. One large image on the left, with two smaller images stacked on top of each other to the right. When I shrink the browser, the images stay in place automatically resize themselves. Here's the website 如果您想现场查看。向下滚动一点,直到看到它。
这是我在 jsfiddle 上的糟糕尝试。出于某种原因,jsfiddle 没有按照它在我的电脑上显示的方式显示它。我电脑上的图像是并排的,就像我想要的那样,但如果我稍微调整一下 window 的大小,它就会中断到下一行。
对于那些不想处理 jsfiddle 的人,这里是相关的 HTML 和 CSS。我知道这是一团糟。
HTML:
/* Section: Gallery */
#gallery {
display: flex;
flex-wrap: wrap;
background: rgb(252, 246, 237);
text-align: center;
}
.coffee-img-1 {
width: 500px;
padding: 1.5rem;
margin-right: 5rem;
margin-top: 2rem;
max-width: 100%;
height: auto;
}
.coffee-img-2,
.coffee-img-3 {
width: 400px;
padding: 30px;
max-width: 100%;
height: auto;
}
.column {
flex: 50%;
padding: 1.5rem;
}
#gallery img:hover {
animation-name: opacity-hover;
animation-duration: 300ms;
animation-fill-mode: forwards;
}
@keyframes opacity-hover {
100% {
opacity: 0.9;
}
}
<!-- Gallery -->
<section id="gallery">
<div>
<img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
</div>
<div class="column">
<img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
<img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
</div>
</section>
在您的示例中,您忘记将 class column
添加到第一个 div 中。像这样:
<!-- Gallery -->
<section id="gallery">
<div class="column">
<img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
</div>
<div class="column">
<img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
<img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
</div>
</section>
要实现此行为,您可以将 width
属性 更改为 max-width
。 width
属性 强制固定宽度,而 max-width
(和 min-width
)表示 "hey, even if my image it's bigger than that resizes it for the max width x
"
示例:
https://codepen.io/icaromh/pen/jRopmp
文档:
我正在开始我的第一个完整网站项目,我已经学习 HTML 和 CSS 大约一个月了,我刚刚完成了 flexbox 的基础知识学习。我想知道是否可以创建一个图像网格,其中图像会随着浏览器 window 仅使用 flexbox 调整大小时自动调整大小,我目前只知道这些。
我想重新创建的是 this. One large image on the left, with two smaller images stacked on top of each other to the right. When I shrink the browser, the images stay in place automatically resize themselves. Here's the website 如果您想现场查看。向下滚动一点,直到看到它。
这是我在 jsfiddle 上的糟糕尝试。出于某种原因,jsfiddle 没有按照它在我的电脑上显示的方式显示它。我电脑上的图像是并排的,就像我想要的那样,但如果我稍微调整一下 window 的大小,它就会中断到下一行。
对于那些不想处理 jsfiddle 的人,这里是相关的 HTML 和 CSS。我知道这是一团糟。
HTML:
/* Section: Gallery */
#gallery {
display: flex;
flex-wrap: wrap;
background: rgb(252, 246, 237);
text-align: center;
}
.coffee-img-1 {
width: 500px;
padding: 1.5rem;
margin-right: 5rem;
margin-top: 2rem;
max-width: 100%;
height: auto;
}
.coffee-img-2,
.coffee-img-3 {
width: 400px;
padding: 30px;
max-width: 100%;
height: auto;
}
.column {
flex: 50%;
padding: 1.5rem;
}
#gallery img:hover {
animation-name: opacity-hover;
animation-duration: 300ms;
animation-fill-mode: forwards;
}
@keyframes opacity-hover {
100% {
opacity: 0.9;
}
}
<!-- Gallery -->
<section id="gallery">
<div>
<img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
</div>
<div class="column">
<img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
<img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
</div>
</section>
在您的示例中,您忘记将 class column
添加到第一个 div 中。像这样:
<!-- Gallery -->
<section id="gallery">
<div class="column">
<img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
</div>
<div class="column">
<img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
<img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
</div>
</section>
要实现此行为,您可以将 width
属性 更改为 max-width
。 width
属性 强制固定宽度,而 max-width
(和 min-width
)表示 "hey, even if my image it's bigger than that resizes it for the max width x
"
示例:
https://codepen.io/icaromh/pen/jRopmp
文档: