我的图像不会保持设置为较小的尺寸答案

【问题标题】：My Image will not stay set to a smaller size我的图像不会保持设置为较小的尺寸
【发布时间】：2020-06-14 18:09:45
【问题描述】：

我有一张图片，我想改变它的大小，使其适合<div>，它位于我的主页以及顶部的导航栏中，但是无论我尝试将什么应用于 CSS图像，没有任何变化，它仍然显示巨大。

我的索引页 div 的 HTML：

<div class="row">
    <div class="grid-full containerHomepage">
        <div class="centered">SIGN UP TO HEAD-SMART<a class="noDecoration brain" href="signup.php"> NOW</a>
            <img class="mainLogo" src="images/HeadSmart.png">
        </div>
        <img src="images/homepage2.jpg">
    </div>
</div>

CSS：

.mainLogo{
  width: 20px;
  height: 20px;
}

我的导航栏的 HTML：

<nav>
  <!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
  <div class="topnav" id="myTopnav">
      <a href="index.php" class="active"><i class="fas fa-home"></i>&nbsp; Home</a>
      <a href="about.php"><i class="fas fa-info-circle"></i>&nbsp; About</a>
      <a href="contact.php"><i class="fas fa-envelope"></i>&nbsp; Contact</a>
      <?php  
        // The below is a small 'if else' statement which depending on whether a user is logged in or not, the menu items will differ
        // If logged in, then show the logout and the dashboard item
        // If not logged in, then show the login and signup button
        if (!isset($_SESSION['studentID'])) {
          echo "<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'></i>&nbsp; Login</a>";
          echo "<a href='signup.php'><i class='fas fa-check-square'></i>&nbsp; Sign Up</a>";
        } else if (isset($_SESSION['studentID'])) {
          echo "<a href ='dashboard.php'><i class='fas fa-tachometer-alt'></i>&nbsp; Dashboard</a> ";
          echo "<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'></i>&nbsp; Logout</a>";
        }
      ?>
      <a href="index.php" class="logo"><i class="fas fa-brain"></i></a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="menu2Function()">&#9776;</a>
  </div>
</nav>

我希望它在导航栏和索引页面上显示的大小（仅以 fa 图标显示以用于演示目的）：

【问题讨论】：

这能回答你的问题吗？ Should image size be defined in the img tag height/width attributes or in CSS?

标签： html css styling

【解决方案1】：

您可以将width 和height 属性分配给图像标签本身，强烈建议这样做。这会告诉浏览器在加载之前图像有多大，以便为它准备空间。

<img src="image.jpg" width="20" height="20" />

【讨论】：

嗨 Luze，效果很好，但是为什么我可以使用内联 CSS 设置高度和宽度，而不是在我的 style.css 表中进行外部设置？我应该使用px 还是%？
在这种情况下，它并不是真正的内联 CSS。在您的外部 style.css 或图像加载之前，它只是告诉浏览器图像的大小是纯 HTML。这样，浏览器可以为其准备空间，并确保您网站的内容在图像最终加载时不会跳来跳去。此语法默认使用px。 px 应该适合您的徽标或一般图标。

【解决方案2】：

您应该在img 标签中定义图像尺寸：

<img width="20" height="20" src="images/HeadSmart.png">

这些值以软件像素（HTML 5）或屏幕像素（HTML 4）定义，因此无需添加单位（例如@ 987654324@ 在您的 CSS 标记中）。

在 HTML 属性中定义尺寸的好处是浏览器可以尽早设置图像样式，即使 CSS 文件尚未完全下载和处理。这样可以防止所谓的Flash of unstyled content (FOUC)。

【讨论】：