html - 如何使图像元素随窗口缩放而不是重新定位

Question

我有一个元素，我在窗口中间有 4 张图片，布局如下:

12
34

我希望所有图像都随窗口缩放，但保持它们的位置。

现在，我将它们全部放在一个名为 Center 的 div 中:

<div style="max-width:1200px;" id="centerArrows">        
    <img src="images/homePage/arrowUL.png" style="position: relative; top: -100px; float:left;"  />
    <img src="images/homePage/arrowUR.png" style="position: relative; left: 40px; top: -95px;" />    
    <img src="images/homePage/arrowDL.png" style="position: relative; left: -35px; top: -80px;" />
    <img src="images/homePage/arrowDR.png" style="position: relative; left: 670px; top: -510px;" />
</div>

使用这个 CSS:

#centerArrows {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;    
    margin-bottom: auto;
    position: relative;
    z-index: 0;   
    width: auto;        
}
img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

知道我做错了什么吗？

Answer 1

看这个 fiddle :

http://jsfiddle.net/LDt8P/

html , body , #centerArrows{
    display:table;
    width:100%;
    height:100%;
}
#centerArrows{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

---

Fiddle 响应评论以限制图像展开到 4 行:

http://jsfiddle.net/LDt8P/1/

---

使用 JQuery 的解决方案，当窗口宽度小于特定宽度时，使图像变小以适应窗口的宽度:

http://jsfiddle.net/LDt8P/3/