Question

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

目前我的工作方式是有5个图像全部互相内嵌，当我改变浏览器大小时，它们会挤压并保持纵横比，但我的问题是如何制作这一行5图像始终位于页面的中央位置而不会改变位置以至于低于对方？

我试过添加保证金：0自动;我的容器是#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

以％为单位设置宽度或高度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

Check this fiddle

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

<强> 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;
}

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

5 个答案:

Check this fiddle

HTML：

CSS：