html - 如何使用 div 使多个图像水平居中并响应？

Question

如何使 div 中的一行图像具有响应性？我的目标是让一行图像(以网页为中心)根据屏幕大小进行缩放。我到目前为止的 (2) 个解决方案就像 this , 但还不够好。我尝试:

• 让它在页面上居中
• 当屏幕较小时(智能手机)，图像应该变小
• 保持在一行中，而不是通过调整大小进入垂直行
• 多张图片之间留空
• 原始图像的大小无关紧要。

我不是编程高手，所以....

提前致谢

丹尼斯

<div style="width: 100%; clear: center;">
<div style="text-align: center;"><a class="hoverborder" href="" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a>  

<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=319" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=318" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=321" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=322" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>

Answer 1

有很多方法可以做到这一点。它们在某种程度上取决于页面中图像周围的内容。我倾向于避免 float ，因为它们会带来其他挑战，而且根本没有必要。

.image-row {
    text-align: center;
}
.image-box {
    width: 20%;
    padding: 1%;
    margin: .5%;
    background: pink;
    display: inline-block;
    font-size: 0; /* fixes bottom padding */
}
.image-box img {
    max-width: 100%;
}

<div class="image-row">
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/800x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x200" />
    </div>
</div>

Fiddle demo