消除图片的空白占用空间

视频教程

在 uni-app 或者 小程序前端布局过程中，我们经常会使用一个 view 包裹一个图片组件，您会发现图片底部会产生一小块空白，如下代码 :

<template>
	<view style="background:#F97D7C;">
		<image 
		style="width:100%;"
		src="https://img0.baidu.com/it/u=1239913398,4122473254&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" 
		mode="widthFix"
		></image>
	</view>
</template>

运行效果 :

解决方案

在 view 上添加样式 font-size:0; 即可。

<template>
	<view style="background:#F97D7C; font-size:0;">
		<image 
		style="width:100%;"
		src="https://img0.baidu.com/it/u=1239913398,4122473254&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" 
		mode="widthFix"
		></image>
	</view>
</template>