提问人：Apnw2 提问时间：11/1/2022 更新时间：11/1/2022 访问量：50
按视口比例调整元素大小
Size element proportionally to viewport
问：
我想根据视口的大小按比例调整 hmtl div 元素的大小。
此元素将放置在动态大小的容器中，因此无法同时对元素的宽度和高度使用视口单位。
我正在尝试在纯 CSS/SASS 中尽可能地做到这一点，我尝试使用 aspect-ratio 属性，但无法使其工作
.element {
width: 80%; /*80% of container width*/
aspect-ratio: calc(100vw/100vh);
}
答：
1赞
tao
11/1/2022
#1
没有 JavaScript 就无法完成。
在您的情况下，表达式无效。文档在这里。calc(100vw/100vh)
使用 JavaScript：
const updateRatios = () => {
;[...document.querySelectorAll(".viewport-ratio")].forEach((el) => {
const { innerHeight, innerWidth } = window
el.style.aspectRatio = innerWidth / innerHeight
})
}
updateRatios()
window.addEventListener("resize", updateRatios).viewport-ratio {
width: 50%;
border: 1px solid red;
}<div class="viewport-ratio"></div>- 如果不明显，则CSS不是解决方案的一部分，添加它只是使解决方案可见而不需要检查。
- 脚本运行后添加到 DOM 的任何元素在再次运行（或调整窗口大小）之前都不会具有该比率。
.viewport-ratioupdateRatios
评论