如何设置图像相对于屏幕中心的绝对位置

时间:2014-08-12 22:09:44

标签: css image responsive-design css-position

我尝试为我的网站设置一个简单的目标网页,只有5张图片,以五边形形式排序。 (图像将分别位于五边形边缘)。 因此,不是一行或一行中的5个图像,而是“圆圈”中有5个图像。

我能够将图像设置在我想要的位置的响应式布局中,它们会在较小的屏幕上调整大小,甚至图像的位置也会响应。

但是这里开始出现问题。图像的位置相对于屏幕边框设置

position: absolute; top: 50% left: 25%

表示第一张图像,依此类推其他4张图像,以便将它们放在五边形五边的位置

调整浏览器窗口大小时,从一个图像到另一个图像的距离会发生变化,当然这是因为相对于窗口边框设置了位置。

并且图像的顺序会中断,直到它们彼此远离或彼此靠近为止。

是否无法将图像位置设置在相对于屏幕上预设点的绝对位置,例如屏幕的绝对中心?

五个图像应该是响应的,但图像的顺序和它们彼此的距离应该始终保持相同的关系! (为了将图像保持为圆形,或以其他方式在五边形的五个边缘处说明)

现在我使用以下代码采用内联样式,在980 * 1280px屏幕上看起来很棒,但在更小或更大的屏幕上,图像的位置不再是所需的“五角形”顺序:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                background-color: #000;
            }

            .overlay1 {
                width: 10%;
                position: absolute;
                top: 50%;
                left:25%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay2 {
                width: 10%;
                position: absolute;
                top: 25%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay3 {
                width: 10%;
                position: absolute;
                top: 50%;
                left: 75%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay4 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 37.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay5 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 62.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <img src="site.com/content/uploads/2014/08/site-logo-vector- 280x280.png" class="overlay1" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay2" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay3" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay4" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay5" />
    </body>
</html>

更新更新更新:

我编辑了以下代码(更改了HTML,如下所示):

    <div class="container">
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri1" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri2" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri3" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri4" />
    </div>

(改变CSS如下):

    .container{
    height: 100vh;
    max-width: 100vh;
    border: 1px red solid;
    position: absolute;
    top: 0%;
    left: 0%;
    }

    img.ri
    {
    position: relative;
    max-width: 25%;
    }
    img.ri:empty
    {
    top: 23%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri1:empty
    {
    top: 50%;
    left: -5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri2:empty
    {
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri3:empty
    {
    top: 60%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri4:empty
    {
    top: 60%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

现在一切都很好,但我希望容器始终显示在视口中心(仅限宽度)

     (position: absolute; left:50%; )

我的image.ri:空显然不适用于.container(仅适用于没有孩子的元素!!!!!!)

有人知道如何集中这个吗?

     position: absolute; left:50vw; 

不起作用。

问题很明显:

“记下选择器:img.ri:empty - empty是一个结构伪类,只匹配没有子元素的元素(图像永远不会有任何子元素)。这是一个CSS3选择器,所以IE8及以下版本将不解析声明。我们本可以使用其他方法,例如条件注释,但这似乎是一个更有效的解决方案,只需要六个额外的字符。“

那么如何将CONTAINER设置为屏幕宽度的REAL中心?

3 个答案:

答案 0 :(得分:1)

您可以尝试在div内部设置图像并为该div提供静态宽度,以便在调整屏幕大小时图像的相对位置保持不变(基本上使div无响应)

编辑:尝试查看this并告诉我这是否是您正在寻找的:)我做的是,我创建了一个包裹<div class="container">并给它以下属性:

.container {
    border: 1px red solid;
    position: relative;    
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

然后我将以下类添加到每个图像,以及您拥有的.overlay#类(删除了一些部分):

.picture {
    width: 10%;
    position: absolute;
    display: inline;
}

参考:this SO post

的第二个答案

编辑#2:以下评论的一个例子:

<div class="container">
    <div class="adjusted">
        // images, same as above
    </div>
</div>

额外的CSS:

.container {
    /* same as above, plus the following line */
    top: 50%;
}

.adjusted {
    top: -100px; /* <--this would be half the height of your pentagon */
}
编辑#3:我想我明白了!有两个嵌套的<div>容器,可能还有一些额外的样式线,但它非常接近。我想如果你玩this,那么你可以使它成功。

祝你好运!

答案 1 :(得分:1)

我有解决方案:: :)

无论如何,真正令人困惑的事情发生了:

这是(我猜)代码的清洁版本:

[小提琴示例] [1] http://jsfiddle.net/beda69/h2ee352f/

     #outer {
     position: relative;
     }
     #inner {
     margin: auto;  
     position: absolute;
     left:0;
     right: 0;
     top: 0;
     bottom: 0;
     }
     .parent{
height: 100vh;
max-width: 100vw;
border: 1px black solid;
position: absolute;
top: 0%;
left: 0%;
}
   .container{
height: 100vh;
max-width: 100vh;
border: 1px red solid;
position: relative;
top: 0%;
left: 35%;
}

img.ri
{
position: relative;
max-width: 25%;
}
img.ri:empty
{
top: 23%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri1:empty
{
top: 50%;
left: -5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri2:empty
{
top: 50%;
left: 25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri3:empty
{
top: 60%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri4:empty
{
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
     <div class="parent" id="outer">
     <div class="container" id="inner">
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri1" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri2" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri3" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri4" />
    </div>
    </div>

无论如何,看看这个! (在相同的小提琴示例中,只需修改代码如下:) 删除整个#outer html和css,并在css第12行添加一个“}”符号,结果相同,只删除外边框...

为什么这是???? 这对我来说几乎是不可能的,因为这是一个额外的“}”标志,应该打破代码或者我错了???

谢谢你的帮助!

我希望我的解决方案可以帮助未来的寻求者:)

答案 2 :(得分:0)

嗯,我认为你的方法并不是最好的,因为它总是有一个随机元素。我尝试使用类似JQuery responsive image maps plugin之类的内容来获得更好的行为,但如果您已经采用这种做法,我会尝试这样的事情:

1)首先,建立一个&#34;容器盒&#34;对于这个元素。

2)然后,在其中,构建一个5x5方格(您需要使用Jquery来检测宽度或使用CSS的绝对宽度)。这些div具有相同的宽度和高度非常重要,即使是空的。

3)使所有图像宽度均为100%。在此之后,将图像放置如下: 第1张图片:第1行,第3列 第2和第3张图像:第1和第5列,第3行 第4和第5张图片:第2和第4列,第5行。

这会奏效。并且它将100%响应。但老实说,我不认为它看起来不错,所以我鼓励你要么使用JQuery路径要么接受响应模型,如果你没有在移动设备中使用五边形,那么请它。当然,取决于您的需求和品味