五个图像集体占据全宽

Question

我正在制作一个网站，其中页脚包含5个社交媒体缩略图，这些图片也是链接：

我希望这些图像的最大宽度为64px（它们的原始大小），当页面的宽度缩小到很大以适应这个时，然后缩小到20％，这样所有5个图像都适合放在旁边彼此。

HTML：

<div id="footer-imgs">
    <a href='https://www.facebook.com/chrisscribnermusic' class='footer-img'><img src='imgs/social-facebook.png'></a>
    <a href='https://twitter.com/ChrisScribs' class='footer-img'><img src='imgs/social-twitter.png'></a>
    <a href='https://soundcloud.com/chris-scribner-1' class='footer-img'><img src='imgs/social-soundcloud.png'></a>
    <a href='https://www.youtube.com/user/ChrisScribs/feed' class='footer-img'><img src='imgs/social-youtube.png' /></a>
    <a href='https://instagram.com/chrisscribs/' class='footer-img'><img src='imgs/social-instagram.png'></a>
</div>

现在CSS是：

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
}
#footer-imgs a {
    padding: 0px;
    margin: 0px;
}
#footer-imgs a img {
    max-width: 64px;
    padding: 0px;
    margin: 0px;
}

图像根本不希望缩小超过64像素。如果窗口收缩这么多，div只会扩展超过页面的宽度（创建水平滚动条）。使用宽度：20％对我来说也没有解决这个问题。我怎样才能让这些缩小他们需要的方式呢？

编辑：只想感谢所有尝试过的人，这是一个令人难以置信的难题！

Answer 1

您可能需要考虑使用flexbox。

高效（最小代码），快速响应，并使对中（纵向和横向）变得容易。

<强> CSS

#footer-imgs {
    display: flex; /* establish flex container */
    align-items: center; /* center flex items vertically */
    justify-content: space-around; /* spread flex items across container */
}

#footer-imgs a img {
    max-width: 100%; /* scale images to screen size */
    height: auto;  /* scale images to screen size */    
}

DEMO：http://jsfiddle.net/2notcw09/4/（调整效果窗口）

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。

Answer 2

就像Rob所说，你可以在img上使用20％的宽度，但是20％的是什么？您应该为父元素指定100％的宽度，以便知道要填充的内容。

HTML

<div id="footer-imgs">
    <a href='https://www.facebook.com/chrisscribnermusic' class='footer-img'><img src='imgs/social-facebook.png'></a>
    <a href='https://twitter.com/ChrisScribs' class='footer-img'><img src='imgs/social-twitter.png'></a>
    <a href='https://soundcloud.com/chris-scribner-1' class='footer-img'><img src='imgs/social-soundcloud.png'></a>
    <a href='https://www.youtube.com/user/ChrisScribs/feed' class='footer-img'><img src='imgs/social-youtube.png' /></a>
    <a href='https://instagram.com/chrisscribs/' class='footer-img'><img src='imgs/social-instagram.png'></a>
</div>

CSS

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    width: 100%;
    text-align:center;
}

#footer-imgs a {
    padding: 0px;
    margin: 0px;
}

#footer-imgs a img {
    width: 20%;
    max-width: 64px;
    padding: 0px;
    margin: 0px;
}

Answer 3

尝试将#footer-imgs width设为100%，将#footer-imgs a img width设为calc(20%)

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    width: 100%;
}
#footer-imgs a {
    padding: 0px;
    margin: 0px;
}
#footer-imgs a img {
    max-width: 64px;
    padding: 0px;
    margin: 0px;
    width: calc(20%);
}

jsfiddle http://jsfiddle.net/ak53nwt4/