html - 如何在 HTML 中做响应式图像行？

Question

我们想要做一个图像网格，其中每一行都是任意数量的高度相同但宽度可能不同的图像。整个东西需要随着浏览器宽度的变化而增长和缩小。

到目前为止我想出的最好的解决方案是:

<div id="root">
        <div><img src="img/r1a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
        <div><img src="img/r2a.jpg" width="50%"/><img src="img/r2b.jpg" width="50%"/></div>
        <div><img src="img/r3a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
        <div><img src="img/r4a.jpg" width="100%"/></div>
        <div><img src="img/r5a.jpg" style="max-width:43.733%; min-width:43.732%;"/><img src="img/r5b.jpg" style="max-width:25.584%; min-width:25.583%;"/><img src="img/r5c.jpeg" style="max-width:30.686%; min-width:30.685%;"/></div>
        <div><img src="img/r6a.jpg" style="max-width:33.861%; min-width:33.860%;"/><img src="img/r6b.jpg" style="max-width:16.480%; min-width:16.479%;"/><img src="img/r6c.jpg" style="max-width:33.184%; min-width:33.183%;"/><img src="img/r6d.jpg" style="max-width:16.480%; min-width:16.479%;"/></div>
    <div>

和CSS:

#root {
            max-width:1480px;
            margin:0 auto;
        }

        #root div {
            white-space:nowrap;
        }

        #root div img {
            padding:0;
            margin:0;
            padding-right:4px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }

这样做的主要问题是，如果同一行中的图像具有不同的宽度，那么它们的高度也不完全相同，并且看起来很糟糕，因为填充不均匀。如果所有图像的大小完全相同，或者如果我将 CSS 中的 padding-right 设置为 0，它就可以正常工作。

另一个问题是我们必须计算每个图像的百分比，这有点耗时。

另一个问题是图像底部有一个 4 像素的填充/边距，我无法去除。

最好的方法是什么？我可以做一些细微的修改来解决其中的一些问题，还是我应该使用完全不同的结构？

下面是上面代码生成的屏幕截图:

您可以看到第二行中图像的高度并不完全相同。

Answer 1

#root div{position:relative; overflow:hidden;}  
#root div img{ height:100%}

您可以将此 css 用于您的图像高度。