我刚刚开始学习 html/css，目前正在开发我的第一个网站。这可能是一个愚蠢的问题，但是当我将“navbar-left_img”图像添加到其父级“Navbar”的 Flex 容器中时，为什么它会缩小。我知道它的12.3%的大小已经从与整个视口的大小相关到与容器的大小相关，但我将容器的宽度设置为100%（因此与整个视口的大小）。所以肯定不会有什么区别，对吧？
这就是我想要的图像尺寸。
body {
margin: 0px;
font-family: "Noto Sans";
}
.navbar-left_img {
width: 12.3%;
padding-top: 2%;
padding-left: 3%;
}
但是当我这样做时，图像突然缩小了。
body {
margin: 0px;
font-family: "Noto Sans";
}
.navbar {
display: flex;
width: 100%;
}
.navbar-left_img {
width: 12.3%;
padding-top: 2%;
padding-left: 3%;
}
这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto Sans"
/>
<body>
<div class="navbar">
<div class="navbar-left">
<a href="https://www.instantadvantages.com/"
><img
src="images/Instant%20Advantages%20logo%20black.png"
alt="Logo"
class="navbar-left_img"
/></a>
</div>
<div class="navbar-right"></div>
</div>
</body>
</head>
</html>
任何帮助将不胜感激！
当您在 CSS 中将元素的宽度设置为百分比（例如 width: 12.3%;）时，它是相对于其包含元素的宽度而不是视口来计算的。在您的情况下，当您将“navbar-left_img”图像的宽度设置为弹性容器（“Navbar”）内的百分比时，它是根据“Navbar”容器的宽度计算的。
如果“导航栏”容器的宽度为视口的 100%，则意味着图像的宽度是“导航栏”容器宽度的 12.3%，而不是视口的 12.3%。
要使图像大小相对于视口，您可以将“导航栏”容器本身的宽度设置为视口的 100%。但是，您还需要确保“Navbar”的父元素也设置为 100% 宽度，一直到 html 和 body 元素。这可确保您的整个布局调整为视口大小。