Siema postanowiłem stworzyć stronę internetową póki co moja wygląda tak https://scr.hu/g6ZMzp
a chciałbym aby 2 i 3 obrazek miały 50% wysokości obrazka 1, ale nie wiem jak to zrobić.
html:
<!DOCTYPE html>
<html lang=pl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth,inital-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="icon" type="image/png" href="images/Icon.png" />
<title>Nostale Wiki</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<header id="siteHeader" class style="width: 104px">
<a id="logo" title="Nostale" href="Index.html"></a>
<a id="navbar" title="nawigacja"></a>
</header>
<section>
<img id="img1" src="Images/img1.jpg" alt="Główna strona nostale" />
<img id="img2" src="Images/img2.jpg" alt="Glacernon">
<img id="img3" src="Images/img3.jpg" alt="potwory">
</section>
<footer>
</footer>
</div>
</body>
</html>
css:
* {
padding: 0;
margin: 0;
font-family: Roboto;
box-sizing: border-box
}
#siteHeader{
position: fixed;
top: 0;
bottom: 0;
left: 0;
min-width: 104px;
color: #12a6ec;
background-color: #034a96;
display: block;
float: left;
overflow: hidden;
width: 104px;
}
body {
margin-left: 104px;
background-color: grey
}
#img1{
width: 50%;
float: left
}
#img2{
width: 25%;
float: left;
}
#img3 {
width: 25%;
}
