内联创建在更改浏览器宽度时会挤压的图像

Question

我想在我的网站上创建一个页面，其中有5张内嵌图像，这些图像会随浏览器自动调整大小，以便它们在同一位置，但在任何屏幕尺寸下查看时都只是调整大小。

目前，我以这样的方式工作：共有5张图像彼此内联，并且当我更改浏览器大小时，它们确实挤压并保持其长宽比，但是我的问题是如何使这5张图像行成为中心始终在页面上显示，而不改变他们的位置，使其位于彼此下方？

我试图添加margin：0 auto; 到我的#images容器和img {}容器中，但似乎都不起作用，

这是我当前的CSS；

#images {
margin-top:400px;

}

img {
width:18%;
padding-left:2px;
position:relative;

} 

这是HTML；

<div id="images">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>

谢谢你的帮助

为了帮助您了解更多信息，这里有一个JSfiddle显示了我当前拥有的内容，我想要的是始终始终居中的图像行， http://jsfiddle.net/c26NJ/

Answer 1

例如，以％设置width或height css属性，并将另一个属性设置为auto，例如

.imageGallery
{
 width:20%;
 height:auto;
 display:inline; // or try float:left
}

Answer 2

看到这个FIDDLE

#images {
    margin-top:400px;
    width:100%;
    text-align:center;
}
img {
    width:18%;
    padding-left:2px;
    position:relative;
    box-sizing:border-box;
}

Answer 3

检查这个小提琴

在上面的小提琴中，无论用户调整窗口大小的程度如何，图像都将保留在同一行中。

的CSS

html,body{
    width:100%;
    height:100%;
    margin:0px auto;
    padding:0px;
    text-align:center;
}
#images {
    display:inline-block;
    width:100%;
}

img {
    width:18%;
    padding-left:2px;
    position:relative;
    display:table-cell;
} 

Answer 4

这可能有效（假设#images位于全角部分内）：

#images {
    max-width: 100%;
    width: 400px;
    margin: 400px auto;
}

img {
    width:18%;
    padding-left:2px;
} 

Answer 5

HTML：

<div id="images">
  <img src="images/imagepage/200x2001.jpg" class="first">
  <img src="images/imagepage/200x2001.jpg">
  <img src="images/imagepage/200x2001.jpg">
  <img src="images/imagepage/200x2001.jpg">
  <img src="images/imagepage/200x2001.jpg">
</div>

和

CSS：

#images {
  width: 100%;
}

#images img {
  width: 19.6%;
  float: left;
  display: block;
  margin-left: 0.5%;
}

#images img.first {
  margin-left: 0;
}