Question

我尝试为我的网站设置一个简单的目标网页，只有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中心？

Answer 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，那么你可以使它成功。

祝你好运！

Answer 2

我有解决方案:: :)

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

这是（我猜）代码的清洁版本：

[小提琴示例] [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行添加一个“}”符号，结果相同，只删除外边框...

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

谢谢你的帮助！

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

Answer 3

嗯，我认为你的方法并不是最好的，因为它总是有一个随机元素。我尝试使用类似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路径要么接受响应模型，如果你没有在移动设备中使用五边形，那么请它。当然，取决于您的需求和品味

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

3 个答案: