javascript - 以固定纵横比控制 HTML 元素的大小
问题描述
我查找的所有答案都不适用于我的用例。
我想以这样的方式修复页面上 HTML 元素的纵横比（特别是我希望始终为方形的画布）
- 它与分配的空间一样大；
- 它适合浏览器窗口而不滚动。
我认为这不能仅由 CSS 完成（请证明我错了）。我确实发现了各种声称可以做到这一点的 CSS 技巧，但它们只考虑了可用宽度或可用高度，而不是两者。
.parentElement.clientWidth我尝试了查找父元素的大小（和）的javascript ，找到较小的元素并通过设置和.parentElement.clientHeight根据该大小调整画布，但由于某种原因，我不明白这不起作用 - 画布结束了太小，只能在窗口调整大小时调整为正确的设置。在这种情况下，父元素的大小由 flexbox 决定。canvas.style.widthcanvas.style.height
编辑：以下代码几乎可以满足我的要求。只有一个问题，您可以通过以下方式观察：
- 在非最大化窗口中加载页面
- 最大化和取消最大化该窗口。
生成的布局与原始布局不同（加载后直接）。
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
background: #404040;
height: 100vh;
min-width: 800px;
display: flex;
justify-content: center;
align-items: stretch;
}
main {
background: yellow;
flex: 0 1 100vh;
display: flex;
flex-direction: column;
}
.sidepanel {
background: blue;
flex: 0.2 0.4 250px;
text-align: center;
}
.spacer {
flex: 0.5 1 0;
}
#square {
background: black;
margin: auto;
}
</style>
<script type="module">
const canvas = document.querySelector('#square')
const parent = canvas.parentElement
const setSquare = () => {
const { clientWidth, clientHeight } = parent
const L = Math.min(clientWidth, clientHeight)
canvas.style.width = canvas.style.height = `${L}px`
}
window.addEventListener('resize', setSquare)
setSquare()
</script>
<div class="spacer"></div>
<section class="sidepanel">
</section>
<main>
<canvas id="square"></canvas>
</main>
<section class="sidepanel">
</section>
<div class="spacer"></div>