我的图片不会保持设置为较小的尺寸

Question

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

HTML 我的索引页 div:

<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-icon）：

Answer 1

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

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

Answer 2

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

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

这些值以 软件像素 (HTML 5) 或 屏幕像素 (HTML 4)，所以不需要添加单位（例如 CSS 标记中的 px）。

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

我的图片不会保持设置为较小的尺寸

My Image will not stay set to a smaller size

html

css

styling