无论做什么我都可以放大视差图像

如何解决无论做什么我都可以放大视差图像

似乎在不同的网站上已经多次问过这个问题，而没有真正的“啊哈！”回答。我仍然很新，我知道有一百种不同的方法可以编写此代码，但我希望有一个非常简单的解决方案，不需要我重写代码。

据我了解，这是视差的固有性质，人们要么必须裁剪图像以使它们工作，要么必须采取很大的解决方法来解决视差固有地放大或弄乱视差尺寸的问题。原始图片，无论页面上的方向如何（对于我而言，我都希望将其保留在屏幕的左侧，而将右侧的文本作为滚动元素，但并没有绕过它，而是页面右上角的导航栏是我的下一个项目。

图片尺寸为1341x2063；我听说有人设置最大高度2063像素；最低高度1341像素；尝试过，没有用。

我为代码中正在使用的实际图片抛出了一个 imgur 链接，以下是该图片的截图：https://imgur.com/lVrQgrQ

我的html具有我的视差的内联css，我希望保持这种方式，因为这样我很容易理解，而不必重做很多项目。

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

解决方法

当背景附件设置为“固定”时，它相对于视口固定。这是为了达到视差效果。浏览器在保持宽高比的同时执行此操作。因此，要防止出现拉伸或缩放图像的外观，您可以裁剪图像或使用背景大小的css值播放。

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

您唯一需要更改的设置是第二个值，这将帮助您修复图像上的拉伸或缩放效果，您可能要检查的另一项建议是将背景尺寸设置为覆盖。