如何放大HTML中topnav内的头像图片且不拉伸导航栏？并设置为圆形可点击

先看你当前的导航栏效果：

问题出在头像尺寸设置过小，且直接放大时会被a标签的padding撑高导航栏。以下是修改后的代码和关键调整点：

修改后的HTML（无需大改，保持结构即可） #

<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styling.css">
    </head>
    <body class="bigbody" style="background-image: url('images/DSC_0761.JPG');">
        <div class="topnav">
            <a class="active" href="#home">
              <img class="profile" src="images/square-profile.jpg" alt="个人头像">
            </a>
            <a href="#news">Newz</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
          </div>
          <div class="mainbody"> 
            <h2 class="titlediv">Wag1 Bruda</h2>
          </div>
    </body>
</html>

修改后的CSS（关键调整部分已标注） #

.topnav {
    background-color: rgb(37,37,37, .3);
    overflow: hidden;
    border-radius: 5px;
  }
  
.topnav a {
    float: left;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    /* 新增：让链接内元素垂直居中，避免头像撑高导航栏 */
    display: flex;
    align-items: center;
  }
  
.topnav a:hover {
    background-color: #1a1a1a;
    color: rgb(255, 255, 255);
    transition: 0.3s;
}

.topnav a.active {
    background-color: #1b1b1b;
    color: white;
    /* 去掉默认padding，用头像的margin来控制间距 */
    padding: 0;
}

body.bigbody {
    position: relative;
    background-size: cover;
}

div.mainbody {
    background-color: #00b7ff00;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    width: 200px;
    height: 200px;
    margin: 500px;
}

h2.titlediv {
    font-family: 'Inter', sans-serif;
}

img.profile {
    /* 设置合适的头像尺寸，这里用40px示例 */
    width: 40px;
    height: 40px;
    /* 圆形化头像 */
    border-radius: 50%;
    /* 保持图片比例，避免变形 */
    object-fit: cover;
    /* 控制头像和导航栏边缘的间距，和其他链接的padding对齐 */
    margin: 7px 16px;
    /* 可选：给头像加个边框增强视觉效果 */
    border: 2px solid #fff;
}

关键调整说明 #

• 圆形头像实现：通过border-radius: 50%将方形图片转为圆形，object-fit: cover保证图片拉伸时不变形，只裁剪多余部分。
• 避免导航栏拉伸：给.topnav a添加display: flex; align-items: center;让链接内的元素垂直居中；同时给.topnav a.active去掉默认padding，用头像的margin来控制间距，确保头像高度不会撑开导航栏。
• 可点击性：头像本身嵌套在<a>标签内，默认就具备点击跳转功能，无需额外处理。

内容的提问来源于stack exchange，提问作者WaffleBell