Html 在div中有几个图像的响应页脚

我有一个Wordpress网站。我修改了页脚，使其包含五个带有图像的div

这是页脚的html代码：

<footer class="site-footer">
        <div class="table">
            <div class="logo-gallery">
                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div><!-- .logo -->
            </div><!-- .logo-gallery -->
        </div><!-- .table -->
    </footer> 

在台式计算机上，图像现在显示为我希望的样子：
1.它们占据了80%的宽度（因此彼此更接近）
2.它们（作为一组）水平放置在屏幕的中心

我想让图像适合更小的屏幕（手机或平板电脑）-现在，当我尝试缩小浏览器窗口时，我会得到一个水平滚动条，并且图像超出窗口的右边缘（我还没有用手机检查此代码）

在较小的屏幕上，我希望它们要么变小以适应宽度（全部五个），要么显示在彼此下方（背景色在下方拉伸）

我还有一个css的第二个版本。在这里，问题是缩小浏览器窗口时图像会聚集（在手机上也是如此：检查这里：）

我正在寻找一种方法来做到这一点，它可以是上述代码修复或请建议一种方法，我可以采取

---

谢谢阅读！：-） 您的css调整应该如下所示：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .site-footer .logo {
   width: 100%;
  }
}

如您所见，mix和max device width值可以更改，您可以添加多个媒体查询，以充分利用布局

/* Footer */

.site-footer {
    background-color: #e8e5ce;
    min-height: 180px;
}

.site-footer .logo-gallery {
    margin: auto;
    width: 70%;
}

.site-footer .logo {
    float: left;
    width: 20%;
    height: auto;
    padding: 30px 15px;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .site-footer .logo {
   width: 100%;
  }
}