如何在div中收缩所有的孩子<img/>，而不会让他们破坏行

Question

我有以下html：

<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th>gears</th>
      <th>rate</th>
    </tr>
    <tr>
      <td class="style-header-column">X1</td>
      <td class="style-input-td">
        <input id="X1-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X10</td>
      <td class="style-input-td">
        <input id="X2-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X100</td>
      <td class="style-input-td">
        <input id="X3-text" type="text" value="0" size="1" />
      </td>
  </tbody>
</table>
<br>
<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th>gears</th>
      <th>A longer heading</th>
    </tr>
    <tr>
      <td class="style-header-column">X1</td>
      <td class="style-input-td">
        <input id="X1-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X10</td>
      <td class="style-input-td">
        <input id="X2-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X100</td>
      <td class="style-input-td">
        <input id="X3-text" type="text" value="0" size="1" />
      </td>
  </tbody>
</table>

<div class="wrapper"> <img src="1"> <img src="2"> <img src="3"> <img src="4"> </div> 对于显示/隐藏的特殊媒体查询有.wrapper，除非是红衣主教，否则请忽略：

!important

所有max-width: 100%; margin: auto!important; display: block!important; float: none!important; padding: 0 80px; 都有：

img

所以使用这3个共享按钮图像：

我希望他们能够相应缩小而不是像这样打破：

如果我将宽度缩小得更多，那么唯一缩小的图像就是脸谱，因为它具有独特的宽度。

那么我该如何解决这个问题呢？ 请提供尽可能符合浏览器兼容性且没有JS的简单CSS / HTML规则。

谢谢，我希望你像我一样喜欢红色箭头， 芽

Answer 1

我喜欢玩这样的东西。如果我们给出一些ID和类，那么我们可以设置它们的宽度百分比，然后它们可以自己保持比例

<div id="social_icon_wrapper" class="wrapper">
  <img class="img_facebook" src="1">
  <img class="img_google"   src="2">
  <img class="img_twitter"  src="3">
</div>

所以，如果我们计算出我们想要的一切的最大尺寸，我们可以做一些数学并计算出它们的百分比

social_icon_wrapper = 213
img_facebook = 120, 120/213 = 0.56
img_google = 42      42/213 = 0.20
img_twitter = 42     42/213 = 0.20
gap = 3               3/213 = 0.014

然后CSS看起来像这样

#social_icon_wrapper 
{
    display: block;
    width: 100%;
}

#social_icon_wrapper img
{
    display: block;
    float: left;
    margin-right: 1.4%;
    width: 20%;
}

#social_icon_wrapper img.img_facebook
{
    width: 56%;
}