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

分类：uni-app

bug反馈

产品分类： 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与小程序都有这个问题）

2024-01-04 10:42 负责人:无分享

0 个回复

要回复问题请先登录或注册

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

操作步骤：

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

预期结果：

与.icon-box奇偶无关

实际结果：

与.icon-box奇偶有关

bug描述：

0 个回复

公告

相关问题

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

操作步骤： 将.icon-box宽高设置为奇数，偶数则无bug

预期结果： 与.icon-box奇偶无关

实际结果： 与.icon-box奇偶有关

bug描述：

与内容相关的链接

0 个回复

公告

相关问题

操作步骤：

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

预期结果：

与.icon-box奇偶无关

实际结果：

与.icon-box奇偶有关