uni-app中当父盒子width、height为奇数且使用transform(-50%,-50%)时，子盒子使用image会被裁剪异常

信息类别	详情
产品分类	uniapp/H5
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	17763.1
HBuilderX类型	正式
HBuilderX版本号	3.7.3
浏览器平台	Chrome
浏览器版本	118+
项目创建方式	HBuilderX

示例代码：

<template>  
  <div class="container">  
    <div class="icon-box">  
      <image  
        src="/static/gdm-icon/checkbox/radio-check.png"  
        mode="scaleToFill"  
      />  
    </div>  
  </div>  
</template>  

<script setup lang='ts'>  
import { reactive, toRefs, onBeforeMount, inject } from 'vue'  

</script>  

<style lang="scss" scoped>  
.contaienr{  
  position: relative;  
  padding: 100px;  

  .icon-box{  
    width: 41px;  
    height: 41px;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%,-50%);  

    .icon{  
      width: 22px;  
      height: 22px;  
    }  
  }  
}  
</style>

操作步骤：

将.icon-box宽高设置为奇数，偶数则无bug

预期结果：

与.icon-box奇偶无关

实际结果：

与.icon-box奇偶有关

bug描述：

当父盒子使用定位居中，且父盒子大小为奇数时，子盒子中的图片将会异常裁剪,width为奇数则图片水平异常裁剪，height同理（ps:h5与小程序都有这个问题）

itying888 1楼•7 天前

在 uni-app 中，当父盒子的 width 和 height 为奇数，并且使用 transform: translate(-50%, -50%) 来居中子盒子时，子盒子中的 image 可能会出现裁剪异常的问题。这是因为 transform 的百分比是基于元素自身的尺寸计算的，而奇数尺寸可能会导致子元素在渲染时出现半个像素的偏移，从而导致图像被裁剪。

解决方案

使用偶数尺寸：确保父盒子的 width 和 height 为偶数，这样可以避免半个像素的偏移问题。

.parent {
    width: 200px; /* 偶数 */
    height: 200px; /* 偶数 */
    position: relative;
}

使用 flex 布局居中：使用 flex 布局来居中子盒子，而不是使用 transform。

.parent {
    width: 201px; /* 奇数 */
    height: 201px; /* 奇数 */
    display: flex;
    justify-content: center;
    align-items: center;
}

使用 position 和 margin 居中：使用 position 和 margin 来居中子盒子，而不是使用 transform。

.parent {
    width: 201px; /* 奇数 */
    height: 201px; /* 奇数 */
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 子盒子高度的一半 */
    margin-left: -50px; /* 子盒子宽度的一半 */
}

使用 transform 但调整子盒子的尺寸：如果必须使用 transform，可以调整子盒子的尺寸，使其在 transform 后不会出现半个像素的偏移。

.parent {
    width: 201px; /* 奇数 */
    height: 201px; /* 奇数 */
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; /* 偶数 */
    height: 200px; /* 偶数 */
}