0

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

到目前为止，我提出的最佳解决方案是：

<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 像素填充/边距。

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

这是上面代码生成的屏幕截图：

在此处输入图像描述

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

4

1 回答 1

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

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

于 2015-09-30T10:37:17.483 回答