窗口调整至特定尺寸时图片宽高比丢失问题求助

我一直在排查为何将浏览器窗口调整到特定尺寸时，图片总是丢失宽高比。将图片移出section标签后，宽高比恢复正常。我查阅了大量相关帖子，尝试了诸多解决方案，甚至使用了ChatGPT，但都没有效果，希望能得到帮助。

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>Sandro Sousa's portfolio.</title>
    <link rel="stylesheet" href="styles/style.css">
    <script defer src="app.js"></script>
</head>
<body>
 <header>
     <nav class="navbar">
            <div class="brand-title">Sandro Sousa Rivera</div>
            <a href="#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <div class="navbar-links">
                <ul>
                         <li><a href="#personal">About Me</a></li>
                         <li><a href="#technologies">Technologies</a></li>
                         <li><a href="#projects">Projects</a></li>
                         <li><a href="#cv">CV</a></li>
                         <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
     </nav>
</header>
<div class="sections">
<section id="personal" class="hidden">
    <p>Hola chicos, soy PERSONAL</p>
<div class="section-content" id="about-me">
    <img class="profile-image" src="resources/profile1.jpeg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section id="technologies" class="hidden">
    <p>Hola chicos soy <b>TECHNOLOGIES</b></p>
    <div class="section-content" id="technologies">
    </div>
</section>
<section id="projects" class="hidden">
    <p>Hola chicos soy <b>PROJECTS</b></p>
    <div class="section-content" id="projects">
    </div>
</section>
<section id="cv" class="hidden">
    <p>Hola chicos soy CV</p>
    <div class="section-content" id="cv">
    </div>
</section>
<section id="contact" class="hidden">
    <p>Hola chicos soy Contact</p>
    <div class="section-content" id="technologies">
    </div>
</section>
</div>
</body>
</html>

CSS代码 #

/* ▼ WEB BODY ▼ */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;600&display=swap');
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    width: 100%;
    background-color: rgb(250, 248, 235);
    font-family: 'Titillium Web','arial';
}
.sections{
    max-width: 100%;
    height: auto;
    padding-top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
section{
    max-width: 100%;
    height: auto;
    min-height: 100vh;
}
.section-content{
    gap: 5%;
    display: flex;
    padding: 5%;
    background-color: white;
    max-width: 100%;
    height: auto;
}
.hidden{
    padding-top: 10%;
    opacity: 0;
    transition: all 2s;
}
.show{
    opacity: 1;
}
/* ▼ NAVIGATION MENU ▼ */
.brand-title{
    color: rgb(250, 248, 235);
}
.navbar{
    z-index: 9999;
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2d2d2d;
    color: rgb(250, 248, 235);
}
.brand-title{
     font-size: 1.5rem;
     margin: .5rem;
}
.navbar-links ul{
    margin: 0;
    padding: 0;
    display: flex;
}
.navbar-links li{
    padding: 1rem;
    list-style: none;
}
.navbar-links li a{
    text-decoration: none;
    color: rgb(250, 248, 235);
    align-items: center;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.navbar a:hover{
    color: rgb(212, 212, 212);
    opacity: 0.7;
}
.toggle-button{
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}
.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: rgb(250, 248, 235);
    border-radius: 10px;
}
@media (max-width: 800px) {
    .hidden{
        padding-top: 30%;
    }
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .toggle-button {
        display: flex;
    }
    .navbar-links {
        display: none;
        width: 100%;
    }
    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }
    .navbar-links ul li {
        text-align: center;
    }
    .navbar-links ul li a {
        padding: .5rem 1rem;
    }
    .navbar-links.active {
        display: flex;
    }
}
/* ▼ ABOUT ME SECTION ▼ */
.profile-image{
    width: 25%;
}
/* OLD CODE FOR THE NAVBAR
 nav {
    overflow: hidden;
    margin: 0 auto 0;
    padding-top: 0px;
    position: fixed;
    width: 100%;
    line-height: 50%;
    background-color: #2d2d2d;
}
nav ul {
    line-height: 50%;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}
nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
nav a:hover{
    color: rgb(212, 212, 212);
    opacity: 0.7;
}
*/

内容的提问来源于stack exchange，提问作者SandroFlex