CSS 类中的图像大小调整答案

【问题标题】：Image in CSS-Class resizingCSS 类中的图像大小调整
【发布时间】：2023-03-06 09:24:01
【问题描述】：

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 中声明一个类然后在 CSS 中调用时，我在尝试将 NAV 中的图像调整为更小时遇到问题。在 VS 代码实时功能中查看图像后，我可以让图像变大但不会变小。我有点困惑，但我相信这是小事。任何人都可以看看这个，看看我在搞砸什么吗？

【问题讨论】：

标签： html css image flexbox

【解决方案1】：

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

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

.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>

【讨论】：

【解决方案2】：

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

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

另一种为您的图像提供标志类的方法

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

【讨论】：