CSS-Class 中的图像正在调整大小

Question

nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  text-align: center;
}

.logo {
  width: 10%;
}

<nav>
  <div class="logo">
    <img src="img/Logo.png" alt="Business logo" />
  </div>

  <div class="links">
    <a href="#Home">Home</a>
    <a href="#About">About</a>
    <a href="#Products">Products</a>
    <a href="#Blog">Blog</a>
    <a href="#Contact">Contact</a>
  </div>
</nav>

在 HTML 中声明 class 然后在 CSS 中调用时，我在尝试将 NAV 中的图像调整为更小时遇到问题。在 VS 代码实时功能中查看图像后，我可以使图像变大但不会变小。我有点困惑，但我确定它很小。谁能看看这个，看看我搞砸了什么？

Answer 1

有几种方法可以解决此问题。一种是不使用 CSS 而是使用图像标签中内置的宽度和高度。这是一个例子。

<img src="img/Logo.png" alt="Business logo" width="100"/>

另一种为图像添加 class 徽标的方法

<img src="img/Logo.png" alt="Business logo" class="logo" />

Answer 2

如果您在要调整大小的图像上指定 class，效果会更好。例如，您的父 div 上有 logo 嵌套图像，请将 class 直接放在图像上。请参阅下面我所做的更改。

我添加了一个 500x500 像素的虚拟图像来演示尺寸变化。因此，如果您在固有尺寸为 500x500 的图像上声明 width: 10%;，它将呈现大约 50 像素的宽度（取决于视口）。

.logo {
  height: 100%;
  width: 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
}

.logo-parent {
  width: fit-content;
}

.links {
  white-space: nowrap;
}

<nav>
  <div class="logo-parent">
    <img src="https://dummyimage.com/500x500/000/fff&text=I'm+Resizing" alt="Business logo" class="logo" />
  </div>

  <div class="links">
    <a href="#Home">Home</a>
    <a href="#About">About</a>
    <a href="#Products">Products</a>
    <a href="#Blog">Blog</a>
    <a href="#Contact">Contact</a>
  </div>
</nav>

CSS-Class 中的图像正在调整大小

Image in CSS-Class resizing

html

css

image

flexbox