如何使图像元素与窗口缩放而不是重新定位 [英] How to make image elements scale with window instead of repositioning

问题描述

我有一个项目，其中我有4张图像在窗口中间，这样布局：

I have a project, where I have 4 images together in the middle of the window, laid out like this:

12
34

我想让图片随着窗口放大或缩小，保持他们的位置。

I want the images to all scale up and down with the window, but maintain their position.

现在，他们都在一个名为中心的div：

Right now, I have them all in a div called Center:

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

任何想法我做错了什么？

Any idea what I'm doing wrong?

推荐答案

查看此小提琴：

http://jsfiddle.net/LDt8P/

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

---

注释以限制图片扩展为4行：

---

Fiddle in response to the comment to restrict the image from spreading out to 4 lines:

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

使用JQuery的解决方案，以便当窗口宽度小于特定宽度时，使图像更小以适合窗口的宽度：

Solution with JQuery to make the image smaller to fit the width of the window when the window width is smaller that a specific width:

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

这篇关于如何使图像元素与窗口缩放而不是重新定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！