Javascript 以固定的纵横比控制HTML元素的大小_Javascript_Html_Css

Javascript 以固定的纵横比控制HTML元素的大小

javascript html css

Javascript 以固定的纵横比控制HTML元素的大小,javascript,html,css,Javascript,Html,Css,我查找到的所有答案都不适合我的用例我想在我的页面上固定HTML元素的纵横比（具体地说，我希望始终是正方形的画布），以便在分配的空间内，它尽可能大它可以放在浏览器窗口中，无需滚动我不认为单靠CSS就可以做到这一点（请证明我错了）。我确实发现了各种各样的CSS技巧，它们都是为了达到这个目的，但是它们只考虑了可用的宽度或可用的高度，而不是两者我尝试使用javascript查找父元素的大小（.parentElement.clientWidth和.parentElement.clientHe

我查找到的所有答案都不适合我的用例

我想在我的页面上固定HTML元素的纵横比（具体地说，我希望始终是正方形的画布），以便

在分配的空间内，它尽可能大
它可以放在浏览器窗口中，无需滚动

我不认为单靠CSS就可以做到这一点（请证明我错了）。我确实发现了各种各样的CSS技巧，它们都是为了达到这个目的，但是它们只考虑了可用的宽度或可用的高度，而不是两者

我尝试使用javascript查找父元素的大小（

.parentElement.clientWidth

和

.parentElement.clientHeight

），通过设置

canvas.style.width

和

canvas.style.height

，找到较小的一个，并根据它调整画布的大小，但出于某种原因，我不明白这是行不通的——画布最终太小，只能在窗口调整大小时调整到正确的设置。在这种情况下，父元素的大小由flexbox确定

编辑：下面的代码几乎满足了我的要求。只有一个问题，您可以通过以下方式观察：

在非最大化窗口中加载页面
最大化和取消最大化该窗口

生成的布局与原始布局不同（直接在加载之后）


身体{
保证金：0；
背景：404040；
高度：100vh；
最小宽度：800px；
显示器：flex；
证明内容：中心；
对齐项目：拉伸；
}
主要{
背景：黄色；
弹性：01 100vh；
显示器：flex；
弯曲方向：立柱；
}
.侧面板{
背景：蓝色；
柔性：0.2 0.4 250px；
文本对齐：居中；
}
.垫片{
弹性：0.51；
}
#方格{
背景：黑色；
保证金：自动；
}
const canvas=document.querySelector（“#square”）
const parent=canvas.parentElement
常数设置平方=（）=>{
常量{clientWidth，clientHeight}=parent
const L=Math.min（客户端宽度，客户端高度）
canvas.style.width=canvas.style.height=`${L}px`
}
window.addEventListener（'resize'，setSquare）
固定方格（）

这是否回答了您的问题？

<!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>