窗口大小改变时，保持div宽高比不变，并居中

原创于 2022-12-15 17:18:44 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

vue3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Vue实现的自适应布局方案，通过监听窗口大小变化调整元素宽高比，确保不同分辨率下布局的一致性和美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<template>
  <RendererVideoVue />
  <div id="content-wrapper">
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { watch, onMounted, onUnmounted, computed } from "vue";
const w = window.innerWidth;
const h = window.innerHeight;
const initAspectRatio =  Number((w / h).toFixed(2))
const resize = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  var controlsWrapper = document.getElementById('content-wrapper') as any
  const aspectRatio = Number((w/h).toFixed(2))
  if(aspectRatio>initAspectRatio){
    controlsWrapper.style.width = Math.round(initAspectRatio*h) + 'px'
    controlsWrapper.style.height = h + 'px'
  }else{
    controlsWrapper.style.width = w + 'px'
    controlsWrapper.style.height = Math.round(w/initAspectRatio) + 'px'
  }
}
onMounted(() => {
 window.addEventListener("resize", function () {
      resize()
    }, false);
})
onUnmounted(() => {
  window.removeEventListener('resize', resize);
});

</script>
<style scoped lang="less">
#content-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
</style>