Question

我有许多水平分布且等间距的徽标（父容器设置为display: flex，justify-content: space-between）。因此，当视口缩小时，它们可以适合屏幕，我使用transform: scale()缩小它们：这并不好，因为虽然徽标本身缩小了尺寸，但它们通常采用的空间会保留，因此它们会显得越来越多彼此分开（特别是最左边和最右边的标志不再触及其父容器的边缘）。

Catch：与下面的简化标记不同，我的设置包含由CMS隐藏的<li>元素，并且不可能提前知道哪些将是可见的以及哪些将被隐藏。< / p>

有什么方法可以解决这个问题吗？

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> s上使用边距来区分它们。

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，因此只需缩小图像的最大宽度即可。也意味着LIs将完全崩溃。新的HTML图像缺失。

如何在不使用transform的情况下按照自身百分比缩小图像尺寸：scale（）

1 个答案: