problem:
The image escapes its container when the height of the page is reduced (even though the size of the image is exactly equal to the size of the container). This is a behavior I have observed in all the browsers I have tested (the height must be reduced a lot; like 200px height window).
picture demonstrating what happens:
(as you can see, the pawn has left its square)
goal:
I wanted to make a chess-board that would automatically resize when the user changed the size of their web-browser.
code:
style.css:
html, body { height: 100%; margin: 0; padding: 0;}
#chess-interface {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
#chess-board {
width: 100vmin;
height: 100vmin;
background-color: pink;
}
#chess-board {
display: grid;
grid-template-columns: repeat(8, 12.5vmin);
grid-auto-rows: 12.5vmin;
}
.chess-cell-white {
background-color: aqua;
}
.chess-cell-black {
background-color: blueviolet;
}
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<main id="chess-interface">
<div id="chess-board">
<div class="chess-cell chess-cell-white">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg" height=100% width=100%>
</div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
<div class="chess-cell chess-cell-black"></div>
<div class="chess-cell chess-cell-white"></div>
</div>
</main>
</body>
</html>
I also appreciate any suggestions not relating to the issue.