How do I make my image stay centered where my div background colors split?-CodePudding

html

<body>

    <header>

        <div  id="headerLeftWall">
        </div>

        <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campos">

        <div  id="headerRightWall">
        </div>

    </header>

</body>

css

body {
    background-color: aqua;
    margin: 0%;
}

header {
    background-color: orange;
    display: flex;
    position: relative;
}

#profilePic {
    position: absolute;
    left: 26%;
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
}

.indexHeaderWall {
    background-color: aliceblue;
    height: 300px;
    border: solid red 1px;

}
#headerLeftWall {width: 30%;}
#headerRightWall {width: 70%;}

I tried using percentages with position but I cant seem to keep my image horizontally centered on the split as I reduce my window size.

Left div takes up 30% of the width, while the right div takes the rest.

I'm assuming ill have to manually adjust position percentages to try and center a given image on the split, does anyone know of a method that would work on any given image? Or how I might adjust my current code to do so?

Thank you for your time!

CodePudding user response：

No idea why you want to do it this way, but seeing as you're asking, you could use a combination of calc() and custom properties, get the image width using JS and pass the width value to the calculation, e.g.

:root {
  --left-wall: 30%;
}

body {
    background-color: aqua;
    margin: 0%;
}

header {
    background-color: orange;
    display: flex;
    position: relative;
}

#profilePic {
    position: absolute;
    left: calc(var(--left-wall) - var(--image-width)/2);
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
    opacity: 0.5;
}

.indexHeaderWall {
    background-color: aliceblue;
    height: 300px;
    border: solid red 1px;

}
#headerLeftWall {width: var(--left-wall)}
#headerRightWall {width: 70%;}

const img = document.querySelector("img");
img.style.setProperty('--image-width', `${img.width}px`);

Working CodePen example

CodePudding user response：

you can try something like this:

HTML

<div id= "container">
  <div id= "profilePic">
    <img />
  </div>
    <div id="colorLeft">
    </div>
    <div id="colorRight">
    </div>
</div>

CSS

#container {
 display: flex;
  align-items: center;
  justify-content: center;
  heigth: 100%;
}

#profilePic {
  width: 300px;
  background: yellow;
  position: absolute;
}

#colorLeft {
  background: green;
  width: 500px;
  height: 500px;
  max-width: 50%;
}

#colorRight {
  height: 500px;
  background: blue;
  max-width: 50%;
  width: 500px;
}

Pen

CodePudding user response：

This keeps it in the centre.

<body>

<header>

    <div  id="headerLeftWall">
    </div>
    
          <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campos">

    <div  id="headerRightWall">
    </div>

</header>

body {
    background-color: aqua;
    margin: 0%;
}

header {
    background-color: orange;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}


#profilePic {
  width: fit-content;
  border: 2px solid yellow;
  position: absolute;
  left: 30%;
  right: 70%;
  transform: translateX( -50% );
  display: flex;
  align-self: center;
}

.indexHeaderWall {
    background-color: aliceblue;
    height: 300px;
    border: solid red 1px;
}
#headerLeftWall {width: 30%;}
#headerRightWall {width: 70%;}

Example Pen