html - 6 张图像居中，但 3 张相邻

Question

我正在尝试制作一个响应式网站，我需要创建一个包含 2 行 6 张图片(每行 3 张图片)的主页，当您缩小屏幕时，这些图片会在彼此下方滑动。

可以在以下位置看到我正在处理的示例:http://www.mijncreaties.com/opstal/

当您缩小屏幕时，您会看到图像是如何一张一张地滑到下面的。但是就在图像滑到旁边的图像下方之前，右侧有一个小间隙(因为它们都向左对齐)。

图像宽度为 330 像素，页面的最大宽度为 1000 像素。当您将页面缩小到 990 像素(比方说 980 像素)时，右侧的图像会滑到其余图像下方。但这留下了 320 像素之间的差距。只是小到可以显示图像，但大到足以引起注意。如果左边的两幅图能居中对齐，就可以填补一点空隙。

全宽:

[image] [image] [image]
[image] [image] [image]

更小

[image] [image]-small gap-
[image] [image]-small gap- 
[image] [image]-small gap-

最小

[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-

是否可以使图像始终在页面居中，但在屏幕变小时仍然在彼此下方滑动？

它的外观示例:

| [image] [image]      |
| [image] [image]      |

我希望它像这样:(居中)

|   [image] [image]    |
|   [image] [image]    |

或者也许:(让它拉伸(stretch)一点)

| [ image ] [ image ]  |
| [ image ] [ image ]  |

我尝试了 display:block;margin-left:auto;margin-right:auto;，但这会将每张图片放在彼此下方，即使页面处于最大宽度也是如此。

如果有人能给我一个工作示例，说明在调整窗口大小时使图像缩小和增长到特定大小的方法，那也可能有效。请查看主页下方的社交媒体版 block (我只是不知道他们是怎么做到的...)

当前代码:

<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a>

CSS:

img.size-full, img.size-large {
    max-width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 18px;
}

Answer 1

您需要为此使用媒体查询。我在下面使用 display:flex 做了一个例子。你不应该需要添加 Bootstrap ——我认为不需要一个完整的库来实现这一点

.wrapper { display:flex; flex-direction:row; flex-wrap:wrap; }
.wrapper > a { display:block; width:33.333333%; text-align:center; }
.wrapper img { display:block; margin:auto; }


@media (max-width: 990px) {
  .wrapper > a { width:50%; }
}


@media (max-width: 660px) {
  .wrapper > a { width:100%; }
}

<div class="wrapper">
<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
  </div>

如果您希望它们随页面调整大小 - 只需从实际图像中删除尺寸属性并将宽度更改为百分比(例如将 width:100%; 添加到 。上面样式中的包装器 img)