Hero Image does not work correctly when zoomed out-CodePudding

I am trying to make a clone of the discord website. And I am facing a lot of problem with the images in the hero section. Please take a look at the gifs I have attched. (notice the hero section bg images when zooming out.)

Notice that in My Attempt I toggled on the left: 50% css property of image. This was a big image so with left: 50 it came at the position as it is in Discord Website.

Problem-> As you would have noticed the image in the discord website remains in the center and you basically just see more and more of the image as you zoom out. However in my clone, when zoomed it zooms out from the left side. Please take a look at the follwing code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero {
  width: 100%;
  height: 92vh;
  background-color: #404eed;
}

.image_container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

img {
  position: absolute;
  bottom: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <img src="https://i.imgur.com/FjoxNjB.png" alt="img1">
    </div>
  </div>
</body>

</html>

(In reality the image that you see in 'My Attempt' is an svg, however here I have added an png (from Imgur). Don't know if this information helps but yes it is an svg.)

Can someone please help me out with this, I have really tried to solve this, but was unable, any help is greatly appreciated. Thank You.

CodePudding user response：

You can center the img horizontally with CSS left and translateX properties when in absolute positioning.

The value of left and translateX can be adjusted so it matches the desired result.

Example:

img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

Hope that it helps!