我想在我的网站上创建一个页面,其中有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/
答案 0 :(得分:0)
以%为单位设置宽度或高度css属性,并将另一个设置为auto,例如
.imageGallery
{
width:20%;
height:auto;
display:inline; // or try float:left
}
答案 1 :(得分:0)
请参阅 FIDDLE
#images {
margin-top:400px;
width:100%;
text-align:center;
}
img {
width:18%;
padding-left:2px;
position:relative;
box-sizing:border-box;
}
答案 2 :(得分:0)
在上面的小提琴中,无论用户调整窗口的大小,图像都将保持在同一行。
<强> 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;
}
答案 3 :(得分:0)
这可能有用(假设#images在全宽度部分内):
#images {
max-width: 100%;
width: 400px;
margin: 400px auto;
}
img {
width:18%;
padding-left:2px;
}
答案 4 :(得分:0)
<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>
和
#images {
width: 100%;
}
#images img {
width: 19.6%;
float: left;
display: block;
margin-left: 0.5%;
}
#images img.first {
margin-left: 0;
}