В настоящее время я собираю цифровую брошюру, но при создании тестовой страницы у меня возникает досадная проблема.
У меня есть фиксированная панель навигации, на которой есть ссылки на изображения и lo go. Я хочу масштабировать изображения на основе панели навигации, чтобы я использовал проценты. Масштабирование на Lo go работает, ссылки не масштабируются и остаются в своем исходном размере.
Я превратил их в обычные изображения без ссылок, и они масштабировались правильно, поэтому кажется, что это только когда я пытаюсь масштабировать ссылка на изображение.
Что-то мне здесь не хватает? Код прилагается ниже.
<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>