为什么我的徽标没有缩放/调整 html/css 的大小？答案

【问题标题】：Why is my logo not scaling/resizing html/css?为什么我的徽标没有缩放/调整 html/css 的大小？
【发布时间】：2021-03-22 08:23:48
【问题描述】：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<nav class="navbar">
  <a href="#" class="logo"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

我尝试使用我的徽标类直接缩放我的徽标，但它似乎不起作用。

这是我的输出：

（它被切断了，但图片继续显示页面下方的一扇门）。

想知道如何做到这一点：

忽略错位和间距问题，这只是我的快速截图娱乐。

我也尝试将display: in-line block 放入我的 .logo{}，但它没有任何作用。

如何重新缩放和定位我的徽标以与其他所有内容保持一致？

【问题讨论】：

你应该调整实际图像的大小，当它只显示为 80x80 时，不要使用 1024x768 图像

标签： html css image web

【解决方案1】：

这是因为img 没有指定宽度或高度。 img 元素不关心 logo 元素的宽度和高度，它会缩放到其原生宽度/高度，除非你告诉它不要这样做。

我将 img 的宽度设置为 100%，这意味着“其容器的 100%”。我将高度设置为auto，这样它就不会变形。

也就是说，您可能应该裁剪实际图像并将其调整为最大的尺寸 - 这样您就不会为小东西加载大图像。

.logo img {
   width: 100%;
   height: auto;
   display: block;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.logo img {
width: 100%;
height: auto;
display: block;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<nav class="navbar">
  <a href="#" class="logo"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

同意，但是我会使用 height:100% 来获得 OP 想要的内容
@Jnui 为什么？ OP 正在得到他们想要的东西。在包含元素中工作的缩放图像。在这种情况下没有区别，因为包含元素是方形的。

【解决方案2】：

将 class="logo" 放在图像元素上。

要更改的示例行：

<img class="logo" src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>

【讨论】：

【解决方案3】：

您必须在 img 标签上定义类。 <img class="logo" src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a> 在 alt 中包含文本也是一种好习惯。

【讨论】：