Parallax image zooming in no matter what I do

it would seem this question has been asked many times over different websites with no real "ah-ha!" answer. I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code.

It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project).

The dimensions of the picture are 1341x2063; I've heard to people setting max-height 2063px; min-height 1341px;. Tried that, didn't work.

I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: https://i.sstatic.net/TxBud.jpg

My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of items.

@charset "UTF-8";

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

button {
  transition-duration: 0.4s;
  background-color: #800080; /* Purple */
  border: none;
  color: white;
  padding: 6px 38px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
}

button:hover{
  background-color: #4CAF50; /* Green */
  color: white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>

  <link href="style.css" rel="stylesheet">
    
    <!-- Adding "active" class/tag to index, for navbar -->
  <link href="index.html" class=active>
    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta name="description" content="Learn about Tom Waters, English tutoring services in Seoul, resume and more.">

  <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
  <title>Me | Home</title>
    
    <!--    GOOGLE FONTS
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
    -->
    
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1671.6">
    
    <style>
        .parallax {
            /* Image to be used */
            background-image: url("https://imgur.com/a/FHtZqm7");
            min-height: 600px;

            /*scrolling effect*/
            background-attachment: fixed;
            background-position: left;
            
            /*troubleshooting image width */
            
            width: 50%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: auto;
            
        }
    
    
    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed 
    @media only screen and (max-device-width: 1366px) {
    .parallax {
    background-attachment: scroll;
     }
     }
    */
        
    </style>
    
    
</head>
<body>

    <div class="parallax"></div>
    <div style="height:400px;background-color:lightgray;font-size:28px">

    <center>
        <nav>
          <ul id="mainMenu">
            <li><a href="about me.html">About Me</a></li>
            <li><a href="Tutoring Services.html">Tutoring Services</a></li>
            <li><a href="Resume.html">Resume</a></li>
            <li><a href="photography_portfolio/photography%20portfolio.html">Photography Portfolio</a></li>
            <li><a href="contact.html">Contact</a></li>  
            <li style="float:right"><a class="active" href="index.html">Home</a></li>
          </ul>
        </nav>
     </center>
        
        <br><br><br>
        
        <p><center>
        This is me,

        <br><br>and this is a personal and professional website, designed solely by myself (as a personal project) with the aim of displaying my resume, contact information and other items in an accessible manner for interested parties to see.     
        </center></p>
        
        </div>
</body>
</html>

Solution

When the background-attachment is set to fixed, it gets fixed relative to the viewport. This is to achieve the parallax effect. The browser does this while keeping the aspect ratio. So to prevent the looks of a stretched or zoomed image you can just crop your image or play around with the background-size css value.

.parallax {
  background-size: 100% 65%;
}

The only setting you have to change is the second value, this will help you fix the stretchy or zoomed effect on the image, an other suggestion you might check is set background-size to cover.