Image changes size when I zoom in and out in a window-CodePudding

I don't know why but my image changes its size when I zoom in or out on my window (chrome). Does anyone know why? This is my code: The css for the image is "myphotointro". Its at the very end of the css and html. This normal size This is zoomed out If anyone knows what to do It would be greatly appreciated

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="gethomeworkdone.css">
</head>
<body>
    <div >
        <nav>
            <div >
                <div >
                  <a  href="http://www.google.com">VovaSite</a>
                </div>
            </div>
            <div >
                <div >
                    <ul >
                        <li >
                                <a href="Homepage.html">Home</a>
                            </li>
                        <li >
                                <a href="aboutme.html">About</a>
                            </li>
                        <li >
                                <a href="homeworkdone.html">Homeworkdone</a>
                            </li> 
                        <li >
                                <a href="articles.html">articles</a>
                            </li> 
                        <li >
                                <a href="articles.html">articles</a>
                            </li> 
                        <li >
                                <a href="articles.html">articles</a>
                            </li> 
                    </ul>
                </div>
            </div>
        </nav>
  </div>
  <div id="backroundcolourthing-gethomeworkdone">
  <div >
    <div >
        <h1 > Need a break from Homework? </h1>
        <p > Got tired of all-nighters? Let others do it for you ! </p>
    </div>
    <div>
        <a  style="text-decoration:none" href="homeworkexchange.html" >Yourhomeworkdone</a>  
    </div>
    <div >
        <img  alt="Pacific" src="imgintro.jpg" >
    </div>
  </div>
</body>
</html>

and css:

nav {
    display: flex; /* 1 */
    justify-content: space-between; /* 2 */
    padding: 1rem 2rem; /* 3 */
    background: rgb(247, 251, 255);;/* 4 */ 
    
}


  nav ul {
    display: flex; /* 5 */
    list-style: none; /* 6 */
    margin: auto;
  }

  
  nav li {
    padding-left: 3rem; /* 7! */
    margin: 3%;
    margin-left: 20px;
  }


  nav a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-family: sans-serif light ;
}

    .barsection {
      margin-right: right;
    }


    
.linklogo {
    color: rgb(0, 0, 0);
    font-size: 25px;
    display: flex; /* 1 */
    justify-content: space-between; /* 2 */
    padding: 1rem 2rem; /* 3 */
  }

  #backroundcolourthing-gethomeworkdone {
    background-color:rgb(247, 251, 255);;
    padding: 10px ;
    border: 0px solid green ;
    width: auto;
    height: 320px;
    margin: 0;
  }

  .sectionleft {
    position: relative;
    left: -280px;
    top: 50px;
  }

.introphrase1 {
    font-family: optima;
    font-size: 40px;
    color: rgba(0, 0, 0, 0.895);
    text-align: center;
    
}

.introphrase2 {
    font-family: optima;
    font-size: 23px;
    color: rgba(0, 0, 0, 0.895);
    text-align: center;
}



.myphotointro {
  display: flex;
  flex-direction: column;
  margin: -8em auto;
  margin-left: 60em;
  max-width: 1140px;
  width: 20%;
}

 .butten {
  position: absolute;
  top: 34%;
  left: 30%;
  background-color:#618fecac;
  color: rgba(0, 0, 0, 0.726);
  border:none; 
  border-radius:20px; 
  padding:15px;
  position: absolute;
}

I tried a lot but I don't know

CodePudding user response：

It is bcz you set up width in percentage. If you do not want to change it with zoom in/out, you need to use px unit. Also max-width is relative bcz, if you change resulotion, it will change width of image.

.myphotointro {
  display: flex;
  flex-direction: column;
  margin: -8em auto;
  margin-left: 60em;
  max-width: 1140px;
  width: 20%;
}

CodePudding user response：

The problem is that the image's absolute size stays the same no matter the zoom level, and that is because you have specified a width in percentage. Change this to a px or em value that looks approximately the same at the default zoom level.

The layout is still broken when zooming out though, and that is because your image has a left margin in an em size. For a quick fix, I recommend using a percentage value here instead, maybe something like margin-left: 60%;.