Изображения не масштабируются в процентах при использовании в ссылках

В настоящее время я собираю цифровую брошюру, но, делая тестовую страницу, я сталкиваюсь с раздражающей проблемой.

У меня есть фиксированная навигационная панель с изображениями и логотипом. Я хочу масштабировать изображения на основе панели навигации, чтобы я использовал проценты. Масштабирование логотипа работает, ссылки не масштабируются и остаются в своем исходном размере.

Я превратил их в обычные изображения без ссылок, и они правильно масштабировались, поэтому кажется, что это только когда я пытаюсь масштабировать ссылку на изображение.

Есть что-то, чего я здесь не хватает? Код прилагается ниже.

<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>

Всего 1 ответ


Вы масштабируете свой логотип по ширине, а ваши ссылки по высоте, поскольку навигационная панель просто прокручивается, когда вы изменяете высоту страницы, их высота не изменяется. Если вы хотите, чтобы они отвечали на высоту окна браузера вместо высоты div, используйте height:2vh; (устанавливает высоту в 2% от высоты просмотра). Или вы можете просто установить их ширину вместо высоты, и они будут действовать так же, как ваш логотип.


Есть идеи?

10000