how to set absolute position of images relative to screen center

css image responsive-design css-position

10,072

Solution 1

You can try setting the images inside of a div and giving that div a static width, so that when the screen is resized the relative positions of the images stays constant (basically making the div non-responsive)

EDIT: Try looking at this and let me know if that's what you're looking for :) What I did was, I created a wrapping <div class="container"> and gave it the following properties:

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

Then I added the following class to each image, as well as the .overlay# class you had (with some parts removed):

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

Reference: The second answer of this SO post

EDIT #2: An example of my comment below:

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

And the extra CSS:

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

.adjusted {
    top: -100px; /* <--this would be half the height of your pentagon */
}

EDIT #3: I think I got it! There are two nested <div> containers, and there may be a few extra lines of styling, but it's pretty close. I think if you play with this then you might be able to make it work.

Good luck!

Solution 2

I HAVE THE SOLUTION: :)

anyway, something really confusing happens:

this is the (i guess) cleaner version of the code,:

fiddle example

     #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>

anyway, look AT THIS!!! (in the same fiddle example, just modify code as follows:) remove the entire #outer html and css, and add a "}" sign at line 12 of css, and you get same result, only the outer border is removed...

WHY IS THIS???? it seems almost impossible to me, as this is a extra "}" sign and should break the code or am i wrong???

thank you for your help!

i hope my solution helps future seekers :)

10,072

Author by

Beda Schmid

WordPress Nerd, Master of Toolset, Slayer of Bugs and Fellow of The Golden Ratio Design Guild On a mission building and maintaining WordPress Themes, Plugins, Blocks and ShortCodes for your WordPress Websites, armed with Deep Knowledge of WordPress CMS, the (famous) WordPress Toolset Plugin, and years of experience in self- and client-owned Website design, redesign and migration. Additional skills in the Adobe Suite Tools to design and understand design specs as well as implement designs into code, along with multilingual communication skills, empower me as the ideal partner for implementing your visions and requirements in code and WordPress, at any time, at a very reasonable rate, with utmost classic Swiss Quality Standards.

Updated on June 04, 2022

Comments

Beda Schmid almost 2 years

I try to set up a simple landing page for my website, and there will only be 5 images, ordered in a pentagon-like form. (the images will be at pentagons edges each). so instead of 5 images in a line or a row, there are 5 images in a "circle".

I was able to set the images in a responsive layout in the positions i want them, they are resizing on smaller screens and even the positions of the images are responsive.

but here begins the problem. the position of the images are set relative to the screen-borders

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

for the first image, and so on for the other 4 images, in order to get them in positions of the five edges of a pentagon

when resizing the browser window the distance from one image to the other changes, of course this is because the position are set in relation to the window-borders.

and the order of the images of course breaks, until they will appear either to distant form each other or to close to each other.

is there no way to set images position in a absolute position in relation to a pre-set point on screen, such as the absolute center of the screen?

the five images should be responsive, but the order of the images and their distance to each other should always be in the same relation! (in order to keep the images in a circle, or otherwise said at the five edges of the pentagon)

right now I use following code with inline style, which looks great on a 980*1280px screen, but on smaller or bigger screens the position of the images is not anymore in the desired "pentagon" order:

<!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>

UPDATE UPDATE UPDATE:

i edited following code (changed HTML as follows):

    <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>

(changed CSS as follows):

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

now everything is good, but i want the container to show always in the center of viewport (width only)

     (position: absolute; left:50%; )

my image.ri:empty is obviously not working for .container (works only with elements with no children's!!!!!!)

does anybody have any idea how to center this?

     position: absolute; left:50vw;

does not work as well.

the problem is obvious :

"Take note of the selector: img.ri:empty — empty is a structural pseudo-class which only matches elements which have NO children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration. We could have used an alternative, such as Conditional Comments, but this seems a far more efficient solution and requires just six additional characters."

so how can i set a CONTAINER to a REAL center of the screen-width?

Beda Schmid over 9 years

i thank you for that solution, i already was there as well by myself and what i didn't like is the fact that the "pentagon"remains in the top half of mobile screens, means the pentagon does not appear in the ABSOLUTE center of the screen but only in the top-center. thats way i came away from that solution. if there is a possibility to center the container to a absolute center, means centered in width and height as well on every screen size, let me know :) thank you again...
Beda Schmid over 9 years

thank you for your idea, i had a look at this JQuery responsive image maps plugin, seems it does quiet a cool job, looking a the the picture they put a s example... i do actually not understand how it works, and looking at the code of the image they put as example i where scared... lots of coding :) and i am a bloody beginner... but you are right. nice looking stuff needs nice looking code :)
RemedialBear over 9 years

The only other suggestion I have is to use top: 50%; for the parent <div> then move it up by half the height of the pentagon (by nesting another <div>). This may work, since you want the distance between the images to remain constant, which will give you a constant height.
Devin over 9 years

well, then use the other code, it's simple html and it's bulletproof, I just don't think it will look fine at really small sizes like mobile
Beda Schmid over 9 years

your approach goes close, i was just trying to modify as follows: in smaller screens move the entire box to the center of screen, (position absolute; top50%; left50%) and when on bigger screens, resize the box to fit the screen height and so the scroll will be removed. (i was trying to use a @media screen and (orientation: landscape)) but it was not working. any idea?
Beda Schmid over 9 years

this approach would be great, but the geometry of the pentagon is not correct, unfortunately, as pentagon edges does not arch exactly the positions in 5 squares grid. since there is no way to make a 5 squar grid with different sizes of boxes, it is not useful for me, but THANK YOU ANYWAY, for your fast ideas and help :-)