transformを使用せずに画像を縮小する方法：scale（）

Question

私は、横に均等に配置されたロゴ（親コンテナはdisplay: flex,と設定されています）があります。ビューポートが小さくなるにつれて画面に収まるので、私は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>には既にtext-align: centerがあるので、画像の最大幅を減らすだけで十分です。また、LIが完全に崩壊することを意味します。新しいHTMLに画像がありません。