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

标签 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%);
    }

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

     (position: absolute; left:50%; )

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

有人知道如何将其居中吗？

     position: absolute; left:50vw;

效果不太好。

问题很明显:

“记下选择器:img.ri:empty——empty是一个结构伪类，它只匹配没有子元素的元素(图像不应该有任何子元素)。这是一个CSS3选择器，因此IE8及以下版本将不解析声明。我们可以使用替代方案，例如条件注释，但这似乎是一个更有效的解决方案，并且只需要六个额外字符。”

那么我如何将容器设置为屏幕宽度的真实中心？

最佳答案

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

编辑:尝试查看 this如果这就是您要找的，请告诉我:)我所做的是，我创建了一个包装 <div class="container">并赋予它以下属性:

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

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

.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那么你也许能够让它发挥作用。

祝你好运!

关于css - 如何设置图像相对于屏幕中心的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25274926/

上一篇：css - Leaflet全屏与Chrome中CSS位置冲突

下一篇：php - 将 SVG 用于 Wordpress Logo

相关文章：

html - 如何使用CSS将侧边栏右对齐？

android - 启用 :hover effect on a touch screen environment

javascript - 如何在移动 View jquery中调整div

javascript - 如何使图像响应？

css - 在 ie8 css3 中选择最后一个 child 的问题

javascript - body 背景模糊功能不适用于多种模式

javascript - 单击中心 <li> 元素并将容器设置为滚动

java - 如何获得跟踪图像的角落？

jquery - 使用 css 操作图像大小无法保持原始 y 位置..!

css - 将鼠标悬停在图像上时更改为另一图像？

©2024 IT工具网  联系我们