如何在不使用变换的情况下按自身百分比缩小图像：scale()

Question

我有许多水平分布且相等的 spaced 徽标（父容器设置为 display: flex、justify-content: space-between）。所以它们可以在视口减小时适合屏幕，我使用 transform: scale() 缩小它们：这不好，因为虽然徽标本身缩小了，但它们通常采用的 space 被保留，因此它们看起来越来越多彼此分开（特别是最左边和最右边的徽标不再接触其父容器的边缘）。

注意：与下面的简化标记不同，我的设置包括 <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> 上使用边距到 space 它们。

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>

当您运行代码段以测试其缩放方式时，需要点击 'Full Page' 按钮。

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

如何在不使用变换的情况下按自身百分比缩小图像：scale()

How to downsize images by percentage of themselves without using transform: scale()

css

css-transforms