我目前正在整理一份数字手册，但是在制作测试页时，我遇到了一个令人讨厌的问题。
我有一个固定的导航栏，上面有图像链接和徽标。我想根据导航栏缩放图像，所以我使用了百分比。徽标上的缩放有效，链接将不会缩放，并保持其原始大小。
我将它们转换为正常的无链接图像，并且它们正确缩放，因此似乎只有当我尝试缩放图像链接时。
我在这里缺少什么吗？代码附在下面。
<html>
<head>
<a>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 20%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #055A8A;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 30%;
font-size: 28px;
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style><title>Introduction</title>
</a>
</head><body>
<div class="sidenav">
<div style="text-align: center;"> <img style="width: 90%;" src="contentsimg/logo.png"></div>
<br>
<a href="index.html"><img style="height: 2%;" alt="INTRODUCTION" src="contentsimg/introduction.png"></a>
<br>
<a href="design.html"><img style="height: 2%;" alt="DESIGN" src="contentsimg/design.png"></a>
<br>
<a href="game.html"><img style="height: 2%;" alt="GAME" src="contentsimg/game.png"></a>
<br>
<a href="film.html"><img style="height: 2%;" alt="FILM" src="contentsimg/film.png"></a>
<br>
<a href="web.html"><img style="height: 2%;" alt="WEB" src="contentsimg/web.png"></a>
<br>
<a href="shortcourses.html"><img style="height: 2%;" alt="SHORT COURSES" src="contentsimg/shortcourses.png"></a>
<br>
<a href="testimonials.html"><img style="height: 2%;" alt="TESTIMONIALS" src="contentsimg/testimonials.png"></a>
<br>
<a href="finance.html"><img style="height: 2%;" alt="FINANCE" src="contentsimg/finance.png"></a>
</div>
<div style="margin-left: 333px; width: 697px;" class="main">
<h2 style="margin-left: 0px; width: 787px;"><img src="headingsimg/Introduction.png" alt="INTRODUCTION" style="width: 182px; height: 29px;"><br>
</h2>
<br>
</div>
</body>
</html>