uni-app image model在图片旋转的情况下高度不正确

uni-app image model在图片旋转的情况下高度不正确

示例代码：

<view style="transform: rotate(67deg);">
       <image src="../../../static/test.png" mode="widthFix"></image>     
</view>

操作步骤：

随便一个页面就能复现

预期结果：

根据图片高度自动显示

实际结果：

高度出问题

bug描述：

以前版本图片原先用这个mode好好的，后面升级了版本，后来不知道怎么回事变形了，就是假如加上旋转的样式的话，高度就有问题了


更多关于uni-app image model在图片旋转的情况下高度不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app image model在图片旋转的情况下高度不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的CSS布局问题，与uni-app本身关系不大。当父容器设置旋转变换时，其内部元素的布局计算会受到transform影响。

问题分析：

  1. widthFix模式本身工作正常，它会根据图片原始宽高比计算高度
  2. 但父容器的rotate变换改变了坐标系，导致图片容器的布局尺寸计算异常
  3. 浏览器在计算transform元素的尺寸时，会考虑变换后的边界框，这可能与预期的布局逻辑不符

解决方案：

<view class="container">
  <image src="../../../static/test.png" mode="widthFix" class="rotated-image"></image>     
</view>

<style>
.container {
  display: inline-block; /* 关键：让容器根据内容自适应 */
}
.rotated-image {
  transform: rotate(67deg);
  display: block; /* 确保图片作为块级元素 */
}
</style>

或者使用绝对定位方案：

<view class="wrapper">
  <view class="rotated-container">
    <image src="../../../static/test.png" mode="widthFix"></image>     
  </view>
</view>

<style>
.wrapper {
  position: relative;
  width: 100px; /* 根据需求设置合适尺寸 */
  height: 100px;
}
.rotated-container {
  position: absolute;
  transform: rotate(67deg);
  transform-origin: center;
}
</style>
回到顶部