的 JS Fiddle

Question

我正在尝试在网格中显示一组图像，并且如果可能的话，我想在iTunes中使用纯CSS重现专辑网格视图的效果。

所需功能（视频：http://quick.as/17l3sdgr）：

图像应显示在带有填充的网格中，填充浏览器宽度。
调整窗口大小时，图像＆amp;填充缩小，直到最小img宽度（比方说150px）。
然后将一个图像推到下一行，图像变大，直到窗口宽度再次减小。

我知道这可以用javascript，但CSS会提供更好的性能。有可能吗？

编辑：我录制了一个截屏视频，以显示iTunes的功能：http://quick.as/17l3sdgr

enter image description here

Answer 1

试试这个（未经测试的）

Fiddle

CSS：

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

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" />

Answer 2

的 JS Fiddle

Cooluhuru的回答让我朝着正确的方向前进。

从Cooluhuru的答案开始：

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

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

后续步骤：

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

使用200x200px图像，这是（464像素，690像素，860像素，1040像素）。断点将取决于图像宽度，因此这仅适用于相同尺寸宽度的图像。

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

注意：

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

Answer 3

只需使用表格即可。你不应该使用表格进行布局。但你应该使用表格表;）

所以只需将所有内容放入表中即可。这真的很容易。

<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>

示例：http://jsfiddle.net/Valtos/X3tTh/

Answer 4

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

<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>

Answer 5

这正是CSS Flexible Box Layout Module的意思！

不幸的是，特别是Firefox（尚未）支持你需要的‘flex-wrap’ property。

所以要只用CSS做“正确”，答案是，你必须等待更好的浏览器支持！

与此同时，您可以使用display: inline-block将图片与媒体查询结合使用来调整图像尺寸，从而接近理想行为。

如何使用纯CSS显示使用浏览器窗口调整大小和流动的图像的全宽网格

5 个答案:

Fiddle

的 JS Fiddle