我有一个金字塔形状的图像包含在一个FlexBox。 只要图像的宽度是固定的，它就会像预期的那样工作。 如果我调整屏幕的大小（或将其更小的分辨率），因为它是一个Flexbox，基本项目（下一行）将有更少的空间，并将被收缩。
理想情况下，我希望有一个基本项目的动态基本大小（屏幕越小，项目就会越小），但是上面行上的项目大小应该索引在下面行上，并且具有相同的大小。
下面是我想要实现的一个示例:https://codepen.io/mantequilla_/pen/wnrwbww一旦浏览器调整了大小（或者分辨率太低），金字塔就会畸形（例如，一个项目越高，它就会越大，这是不需要的）。
不确定，我想要达到的是可行的CSS只，但我开放的任何建议。
供参考的示例代码:
<style>
.row {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.item {
display: inline-block;
}
img {
width: 50%;
}
</style>
<ul class="row">
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img class="Pyramide-img-128" src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
谢了。
可以尝试使用视图宽度。
<style>
.row {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.item {
display: inline-block;
}
img {
width: 5vw;
margin-left: 2.5vw;
margin-right: 2.5vw;
}
</style>
如果已知行数或您有最大值，您可以尝试如下所示:
null
:root {
--r:5; /* number of row */
}
body {
margin:0;
text-align:center;
}
.container {
display:inline-flex;
flex-direction:column;
}
.row {
padding:0;
margin:0 auto;
display: flex;
list-style:none;
}
img {
width: 50%;
}
.row:not(:last-child) {
width:0;
}
/* you can easily generate the below using SASS/LESS*/
.row:nth-last-child(2) {min-width:calc(100% * (var(--r) - 1)/var(--r));}
.row:nth-last-child(3) {min-width:calc(100% * (var(--r) - 2)/var(--r));}
.row:nth-last-child(4) {min-width:calc(100% * (var(--r) - 3)/var(--r));}
.row:nth-last-child(5) {min-width:calc(100% * (var(--r) - 4)/var(--r));}
.row:nth-last-child(6) {min-width:calc(100% * (var(--r) - 5)/var(--r));}
.row:nth-last-child(7) {min-width:calc(100% * (var(--r) - 6)/var(--r));}
.row:nth-last-child(8) {min-width:calc(100% * (var(--r) - 7)/var(--r));}
.row:nth-last-child(9) {min-width:calc(100% * (var(--r) - 8)/var(--r));}
/*.row:nth-last-child(N) {min-width:calc(100% * (var(--r) - (N-1))/var(--r));}*/<div class="container">
<ul class="row">
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
<ul class="row">
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
<li class="item"><img src="https://i.imgur.com/8ZYUZbG.png" alt="Card"></li>
</ul>
</div>