这个问题似乎在不同的网站上被问了很多次，但没有真正的"啊哈"答复我还是个新手，我知道有一百万种不同的编码方法，但我希望有一个非常简单的解决方案，不需要我重写代码。
我的理解是，这是视差的固有性质，人们要么不得不裁剪图像以使其工作，要么不得不做非常大的变通办法来解决视差固有地放大或干扰原始图片尺寸的问题，无论页面的方向如何(在我的情况下，我想把它放在屏幕的左侧，右边的文本是滚动元素，我还没有找到它，但把导航栏放在页面的右上半部分是我的下一个项目(。
图片尺寸为1341x2063；我听说有人设定最高高度2063px；最小高度1341px；。试过了，没用。
我在代码中弹出了一个我正在处理的实际图片的imgur链接，下面是我端的屏幕截图：https://i.stack.imgur.com/TxBud.jpg
我的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%;
}
唯一需要更改的设置是第二个值，这将帮助您修复图像上的拉伸或缩放效果，您可以检查的另一个建议是将背景大小设置为覆盖。
添加background-size: 'auto auto'对我很有用。将其设置为"cover"会产生巨大的缩放效果。这修复了它。