【发布时间】：2016-09-08 15:52:43
【问题描述】：
我正在尝试制作一个响应式网站，我需要创建一个主页，其中包含 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] |
或者也许：（让它有点伸展）
| [ image ] [ image ] |
| [ image ] [ image ] |
我尝试了 display:block;margin-left:auto;margin-right:auto;，但这会将每个图像放在彼此下方，即使页面处于最大宽度也是如此。
如果有人可以给我一个工作示例，说明在调整窗口大小时使图像缩小并增长到一定大小的方法，那也可能有效。请查看主页下方的社交媒体块（我只是不知道他们是如何做到的......）
当前代码：
<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;
}
【问题讨论】：
-
可以在包含图片的div中设置
text-align:center：.entry-content{text-align:center} -
当屏幕调整大小时，图像是保持相同大小还是百分比宽度？
-
目前它们的大小保持不变，但如果我知道如何在调整大小时控制它们的增长，那也可能会奏效。我真的不知道该怎么做。
标签： html css image responsive-design