gpt4 book ai didi

javascript - 如何使图像自动适应容器的最大尺寸?

转载 作者:搜寻专家 更新时间:2023-10-31 08:28:23 25 4
gpt4 key购买 nike

我有一个包含多个图像的容器。我要

1.) 当只有一张图片时,图片占据整个空间:

 ------------------Container----------------
| --------------------------------------- |
| | | |
| | | |
| | Image | |
| | | |
| | | |
| --------------------------------------- |
-------------------------------------------

B) 当有两张图片时

 ------------------Container----------------
| -------------------- ------------------ |
| | | | | |
| | | | | |
| | Image 1 | | Image 2 | |
| | | | | |
| | | | | |
| -------------------- ------------------ |
-------------------------------------------

C) 如果有 3 或 4 张图像,则保持在同一行

 ------------------Container----------------
| --------- --------- --------- --------- |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| --------- --------- --------- --------- |
-------------------------------------------

D) 当有5张图片时,会有两行,第一行4张,第二行1张。

 ------------------Container----------------
| --------- --------- --------- --------- |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| --------- --------- --------- --------- |
| --------- |
| | | |
| | | |
| | | |
| | | |
| | | |
| --------- --------- --------- --------- |
-------------------------------------------

是否可以在没有 js 的情况下在 css 中实现?

有没有库可以做到这一点?

最佳答案

这可以使用 flexbox 来实现:

  • display: flex;flex-wrap: wrap; 添加到包含 img 的元素。 display: flex; 告诉子元素使用 flexbox 模型。 flex-wrap: wrap; 允许元素换行。
  • 添加 flex: 1 0 25%;(flex-growflex-shrinkflex-basis< 的简写) 到图像 imgflex-grow 告诉元素它可以根据需要增长,flex-shrink 告诉元素它可以收缩。 flex-basis 是元素的默认宽度,在本例中为 25%,因为您需要连续 4 个 img

.container {
display: flex;
flex-wrap: wrap;
height: 200px;
width: 100%;
}
.container img {
flex: 1 0 25%;
}
<strong>1</strong>
<div class="container">
<img alt="" src="http://placehold.it/300x300" />
</div>
<strong>2</strong>
<div class="container">
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
</div>
<strong>3</strong>
<div class="container">
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
</div>
<strong>4</strong>
<div class="container">
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
</div>
<strong>5</strong>
<div class="container">
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
<img alt="" src="http://placehold.it/300x300" />
</div>

关于javascript - 如何使图像自动适应容器的最大尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30597283/

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