uni-app image组件会把容器撑大4px

uni-app image组件会把容器撑大4px

开发环境 版本号 项目创建方式
Windows win1124h2 HBuilderX
HBuilderX 4.45
Chrome Chromium: 128.0.6613.150

操作步骤：

如上

预期结果：

如上

实际结果：

如上

bug描述：

image widthFix时，如果自适应后高度为50px， 浏览器检查元素，div高度会变成54px，uni-image标签高度，img高度均是50px，多出的4px无法直接消除

更多关于uni-app image组件会把容器撑大4px的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可能跟图片对齐方式有关 加上vertical-align: middle;试试 <view style="background-color: aqua;">
<image style="width: 100rpx;vertical-align: middle;" src="/static/logo.png" mode="widthFix"></image>
</view>

更多关于uni-app image组件会把容器撑大4px的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢

这是一个常见的浏览器渲染问题，主要是由于<img>元素的默认垂直对齐方式(vertical-align)导致的。

解决方法有以下几种：

  1. 为父容器添加样式：
.parent {
  line-height: 0;
  font-size: 0;
}
  1. 为image组件添加样式：
uni-image {
  display: block;
}
  1. 或者直接设置vertical-align：
uni-image {
  vertical-align: top; /* 或 bottom/middle */
}
回到顶部