如何在不使用 transform() 的情况下按自身的百分比缩小图像的大小:scale()

Question

我有许多水平分布和等间距的徽标(父容器设置为display: flex，justify-content: space-between(。因此，当视口减少时，它们可以适应屏幕，我使用transform: scale()缩小它们：这不好，因为尽管徽标本身缩小了，但它们通常占用的空间被保留下来，因此它们看起来越来越彼此分开(特别是最左边和最右边的徽标不再接触其父容器的边缘(。

捕获：与下面的简化标记不同，我的设置包括<li> CMS隐藏的元素，并且无法提前知道哪些元素可见，哪些元素将被隐藏。

有什么办法解决这个问题吗？

.HTML：

<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>

.CSS：

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

Answer 1

对图像本身使用 max-width: 100% 来约束它们。然后使用<li>上的边距来间隔它们。

ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /*
  justify-content: space-around; <-- you might try this instead 
  */
}
li {
  /*margin: 0 5px; no-no for OP use case*/
  text-align: center;
}
img {
  max-width: 96%; /* the margin workaround */
}
/* demo cleanup only */
ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<ul>
  <li>
    <img src="http://fillmurray.com/200/300" />          
  </li>
  <li>
    <img src="http://fillmurray.com/200/300" />          
  </li>
  <!-- 
  <li></li>
  Oops, missing LI. -->
  <li>
    <img src="http://fillmurray.com/200/300" />          
  </li>
</ul>

运行代码段时需要点击"整页"按钮以测试其缩放方式。

编辑：无 LI 边距：您可以通过几种不同的方式将边距移动到图像上。在这里，由于<li>已经text-align: center，因此只需减小图像上的最大宽度就足够了。也意味着LI将完全崩溃。新 HTML 缺少图像。