如何缩小图像的百分比，而不使用transform：scale（）

Question

我有一些水平分布且等间隔的徽标（父容器设置为display: flex,justify-content: space-between）。所以他们可以适应屏幕上的视口减少，我使用transform: scale()缩小它们：这并不好，因为尽管徽标本身缩小了尺寸，但它们通常需要的空间被保留下来，因此它们看起来越来越分开（特别是最左边和最右边的徽标不再接触其父容器的边缘）。

捕捉：与下面的简化标记不同，我的设置包含由CMS隐藏的<li>元素，并且无法预先知道哪些元素可见，哪些元素将隐藏。

任何解决此问题的方法？

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有一个缺失的图像。