Html 如何使用纯CSS在浏览器窗口中显示图像的全宽网格，以调整其大小并使其流动

我试图在网格中显示一组图像，如果可能的话，我想用纯CSS在iTunes中重现相册网格视图的效果

所需功能（视频：）：

图像应显示在带有一些填充的网格中，填充浏览器宽度

当窗口调整大小时，图像和填充会收缩到最小img宽度（比如150px）

然后，一个图像被推到下一行，图像变大，直到窗口宽度再次减小

我知道这在javascript中是可能的，但是CSS将提供更好的性能。可能吗

编辑：我录制了一个屏幕广播来显示iTunes的功能：

试试这个（未测试）

CSS:

HTML:

<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />
<img src="yourimage.jpg" />

只需使用表格即可。 您不应该使用表格进行布局。但是您应该使用表来表示表；）

把你所有的东西都放在桌子上。那真的很容易

<table>
    <tr>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingOrangeReal/200x200_OilPaintingOrangeReal_609fc3f644b74122ba5719f9e3255d2f.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingRed/200x200_OilPaintingRed_320c459d9c874e03b8b5c7daab8eb69d.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingGreen/200x200_OilPaintingGreen_c105d0d423204591937169f2ebe630eb.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingBlue/200x200_OilPaintingBlue_37b898bfa1e8469cba9c5ad5af118870.jpg" /></td>
    </tr>
    <tr>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingOrangeReal/200x200_OilPaintingOrangeReal_609fc3f644b74122ba5719f9e3255d2f.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingRed/200x200_OilPaintingRed_320c459d9c874e03b8b5c7daab8eb69d.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingGreen/200x200_OilPaintingGreen_c105d0d423204591937169f2ebe630eb.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingBlue/200x200_OilPaintingBlue_37b898bfa1e8469cba9c5ad5af118870.jpg" /></td>
    </tr>
    <tr>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingOrangeReal/200x200_OilPaintingOrangeReal_609fc3f644b74122ba5719f9e3255d2f.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingRed/200x200_OilPaintingRed_320c459d9c874e03b8b5c7daab8eb69d.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingGreen/200x200_OilPaintingGreen_c105d0d423204591937169f2ebe630eb.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingBlue/200x200_OilPaintingBlue_37b898bfa1e8469cba9c5ad5af118870.jpg" /></td>
    </tr>
    <tr>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingOrangeReal/200x200_OilPaintingOrangeReal_609fc3f644b74122ba5719f9e3255d2f.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingRed/200x200_OilPaintingRed_320c459d9c874e03b8b5c7daab8eb69d.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingGreen/200x200_OilPaintingGreen_c105d0d423204591937169f2ebe630eb.jpg" /></td>
        <td><img src="http://rndimg.com/ImageStore/OilPaintingBlue/200x200_OilPaintingBlue_37b898bfa1e8469cba9c5ad5af118870.jpg" /></td>
    </tr>
</table>

---

示例：

如果我错了，请纠正我。但我提出我的答案。我可能借了别人的小提琴。对不起。您可以拖动滑块以查看由于在图像上使用引导而对响应性的影响

<div class="row"> 
    <div class="col-md-4">
        <div class="thumbnail">                
            <a href="#"><img src="http://getbootstrap.com/2.3.2/assets/img/example-sites/gathercontent.png" class="img-responsive"></a>
            <div class="caption">
                <h4 style="text-align:center;">Image Thumbnail 1</h4>
            </div>                
        </div>
    </div>

    <div class="col-md-4">
        <div class="thumbnail">                
            <a href="#"><img src="http://getbootstrap.com/2.3.2/assets/img/example-sites/soundready.png" class="img-responsive"></a>
            <div class="caption">
                <h4 style="text-align:center;">Image Thumbnail 2</h4>
            </div>                
        </div>
    </div>

    <div class="col-md-4">
        <div class="thumbnail">                
            <a href="#"><img src="http://getbootstrap.com/2.3.2/assets/img/example-sites/soundready.png" class="img-responsive"></a>
            <div class="caption">
                <h4 style="text-align:center;">Image Thumbnail 3</h4>
            </div>                
        </div>
    </div>
</div>

图像缩略图1
图像缩略图2
图像缩略图3

库卢胡鲁的回答给了我正确的方向

从Cooluhuru的答案开始：

img
{
    float:left;
    width : 31%;
    padding : 1%;
    max-width: 150px;
    min-width : 100px;
}

它以网格模式浮动图像，并使用基于百分比的填充。最大宽度和最小宽度是必需的

下一步：

img
{
    float:left;
    width : 31%;
    padding : 1%;
    max-width: 150px;
    min-width : 100px;
}

现在，我们在图像溢出到下一行的点上添加媒体查询（甚至在这之前，但是图像不会达到最大宽度）

对于200x200px的图像，这是在（464px，690px，860px，1040px）。断点将取决于图像宽度，因此这仅适用于相同大小和宽度的图像

接下来，对于每个断点，只需调整图像宽度%，以允许图像以其最小的媒体查询状态填充该行，并使图像足够小，以便图像可以增长

注:

最好有一个固定的填充物，因为随着窗口变大，填充物会越来越多

这正是这本书的用意

不幸的是，尤其是Firefox（还）不支持，这在您的案例中是需要的

因此，只有使用CSS才能“正确”地实现，答案是，您必须等待更好的浏览器支持

---

同时，您可以通过使用图像的

display:inline block

，并结合媒体查询来调整图像大小，从而接近您所需的行为。

您是否可以提供一份您试图实现的参考。我们支持CSS3中的动画和过渡。类似于？您可以结合使用。@tewathia无法实现步骤2@ShridharGupta我知道，这是一把旧小提琴，我曾经做过，用来向别人展示响应性设计。您必须在媒体查询中设置div标记的样式（以百分比表示

width

，以像素表示

minwidth

），以获得您想要的确切行为。这实现了前两个步骤，但当图像太小时不会将其推到下一行。从语义上讲，对于表格数据，应该使用

。一堆图像当然不是表格数据。为了像表格元素一样显示它们，CSS中的display属性有不同的值（表格、表格行、表格单元格）。表格用于表格数据，而不是图像。您可以通过访问本教程来完成此操作。这一个非常接近，它会调整大小，然后推到下一行，但不会调整图像大小以适应右侧新的可用空间。谢谢！这使我走上了正确的方向。请看我的答案，这正是bootstrap的用途。您可以定义任何给定分辨率下的列数，也可以编写自己的媒体查询。你想让我为你想要的效果再做一把小提琴吗？也许这样可以：。拖动滑块以查看效果。我不认为有任何其他的解决办法，除了击中断点。调整图像的最小宽度和最大宽度为50px和80px，我可以观察到你正在寻找的效果。顺便说一句，谢谢你的小提琴：）你的JS小提琴链接断了