无论我做什么，视差图像都会放大

Question

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

据我了解，这是视差的固有性质，人们要么不得不裁剪图像以使其正常工作，要么不得不采取非常大的变通办法来解决视差固有地放大或混淆尺寸的问题原始图片的，无论页面上的方向如何（在我的例子中，我想把它放在屏幕的左侧，右边的文本是滚动元素，还没有绕过它但在页面右上半部分放置导航栏是我的下一个项目）。

图片尺寸为1341x2063；我听说有人将 max-height 设置为 2063px；最小高度 1341px;.试过了，没用。

我为我在代码中使用的实际图片制作了一个 imgur link，这是我这边的截图：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>

Answer 1

当 background-attachment 设置为固定时，它相对于视口固定。这是为了实现视差效果。浏览器在保持纵横比的同时执行此操作。因此，为了防止拉伸或缩放图像的外观，您可以裁剪图像或使用 background-size css 值。

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

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

Answer 2

补充一下，添加 background-size: 'auto auto' 对我有用。将其设置为 'cover' 会产生巨大的缩放效果。这修复了它。

无论我做什么，视差图像都会放大

Parallax image zooming in no matter what I do

html

css

scale

parallax

sizing