transform: scale 缩小后 去除空白(白边)多余部分的方法(之一)

完整代码(vue的)

<style lang="less">
  .test111wWarp{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    .father{
      overflow: hidden;
    }
    .div11{
      width: 300px;
      height: 500px;
      transform: scale(0.5);
      transform-origin: 0 0;
      background: red;
      color: #fff;
    }
    .div11>p{
      font-size: 14px;
      font-weight: bold;
    }
  }
</style>
<template>
  <div class="test111wWarp">
    <div class="father" :style="`height:${div11OffsetHeight}px;width:${div11OffsetWidth}px;background: greenyellow;`">
      <div ref="div11" class="div11">
        <p>测试字符测试字符测试字符测试字符测试字符测试字符</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  name: "test111",

  //组件对象
  components: {
  },

  //变量书写对象
  data() {
    return {
      div11OffsetHeight: '100%',
      div11OffsetWidth: '100%',
    }
  },

  //初始化钩子函数,只执行一次
  mounted() {
    //调用初始化函数
    this.Init()
  }, 
  //书写方法对象
  methods: {
    /**
    * @desc 初始化函数
    */
    Init() {
      let div11OffsetHeight = this.$refs.div11.offsetHeight
      let div11OffsetWidth = this.$refs.div11.offsetWidth
      this.div11OffsetHeight = div11OffsetHeight * 0.5
      this.div11OffsetWidth = div11OffsetWidth * 0.5
      console.log('this.$refs.div11.offsetHeight',this.$refs.div11.offsetHeight)
      console.log('this.$refs.div11.offsetWidth',this.$refs.div11.offsetWidth)
    },
  },
  computed: {
  },
  watch: {
  }
}
</script>

未缩小情况 的样子是这样

首先先通过transform: scale(0.75);缩进
这时候会出现多余的部分 透明度

这时候需要通过transform-origin: 0 0;让他的位置在左上角

之后通过获得缩小的div的宽高 并且与你缩小的倍率相乘(就是你写在scale括号中的数字) 就能得到他实际的高度和宽度
再通过通过外层的div(也就是在图中绿色部分的div)设置成其实际的宽高 并且 设置overflow: hidden;
就能去除多余部分