如何縮小圖像的百分比，而不使用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有一個缺失的圖像。