2
0
0
你有aspect-ratio告訴棋盤具有與寬度相同的高度，所以如果你的寬度是3000px，你的高度將是相同的。你有選擇
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
height: 100vh;
background-color: grey;
display: flex;
flex-direction: column;
}
.header {
flex-shrink: 0;
height: 10px;
background-color: blue;
}
.child {
flex-grow: 1;
background-color: lightcoral;
}
.chessboard {
height: 100%;
max-height: 100%;
background-color: purple;
margin: auto;
}
.footer {
flex-shrink: 0;
height: 10px;
background-color: green;
}
<div class="parent">
<header class="header">
</header>
<div class="child">
<div class="chessboard">
main
</div>
</div>
<footer class="footer">
</footer>
</div>
最終答案取決於您的一些澄清。我在這個(gè)問題的評(píng)論中問過你。但我會(huì)給出一個(gè)通用的答案。
我將簡(jiǎn)要解釋下面範(fàn)例中所做的事情。
我創(chuàng)建了一個(gè) .chessboard-wrapper ，其中有一個(gè) 。 根據(jù)需要進(jìn)行縮放，並具有 aspect-ratio: 1;。
.chessboard 本身俱有 position:absolute; 並將採用父親的尺寸。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
height: 100vh;
background-color: grey;
display: flex;
flex-direction: column;
}
.header {
height: 10px;
background-color: blue;
flex: none;
}
.child {
background-color: red;
flex: auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.chessboard-wrapper {
position: relative;
min-height: 0;
margin: auto;
aspect-ratio: 1;
}
.chessboard-wrapper > canvas {
max-width: 100%;
max-height: 100%;
}
.chessboard {
position: absolute;
inset: 0;
background-color: purple;
}
.footer {
height: 10px;
background-color: green;
flex: none;
}
<div class="parent">
<div class="header"></div>
<div class="child">
<div class="chessboard-wrapper">
<canvas width="1000000" height="1000000"></canvas>
<div class="chessboard"></div>
</div>
</div>
<div class="footer"></div>
</div>
