Css 如何在不使用transform:scale（）的情况下按图像的百分比缩小图像

我有许多水平分布且间距相等的徽标（父容器设置为

display:flex

，

justify content:space-between

）。当视窗缩小时，它们可以放在屏幕上，我使用

transform:scale（）

：这不好，因为虽然徽标本身被缩小了，但它们通常占用的空间被保留了下来，因此它们之间的距离越来越远（特别是最左侧和最右侧的徽标不再接触父容器的边缘）

问题：与下面的简化标记不同，我的设置包含CMS隐藏的

元素，并且无法提前知道哪些元素是可见的，哪些元素是隐藏的

有办法解决这个问题吗

HTML:

---

在图像本身上使用

最大宽度：100%

来约束它们。然后在

上使用边距来隔开它们

ul{
显示器：flex；
对齐项目：柔性端；
证明内容：之间的空间；
/*
证明内容：周围的空间；

寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在a中。看不出有问题，我编辑了我的问题以添加一些代码。为什么不按查看端口百分比设置图像大小？因为它们的大小不同。好的答案！为了清楚起见，这里的关键是flex shrink是默认情况下为1，因此li会在必要时减小大小谢谢。但在我的特定设置中，某些图像/徽标被隐藏，我不知道是哪些图像/徽标。因此我无法在第一个和最后一个徽标上设置左边距0和右边距0。因此解决方案不能依赖边距…我应该在我的问题中提到这一点。抱歉，只是编辑了它@drake035更新了我的答案。谢谢！但我想我们正在远离这个问题。我的设置中隐藏了一些li元素（不仅仅是图像）。同样，在您的示例中，图像的间距也不相等。但我接受您的答案，因为最大宽度和边距才是关键。对于处理隐藏项，我使用jQuery，可能别无选择。@drake035忽略了间距错误。如果LI被隐藏（而不是图像），则图像间距将再次被隐藏。再次更新。

<ul>
  <li>
    <img src="image1.jpg" />          
  </li>
  <li>
    <img src="image2.jpg" />          
  </li>
  <li>
    <img src="image3.jpg" />          
  </li>
  <li>
    <img src="image4.jpg" />          
  </li>
</ul>

ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
li {
  transform: scale(0.5);
}