关于小程序widthFix图片高度不能自适应的问题转载

微信小程序 Image 画面实现宽度100%或设置为rpx的值例如520rpx应该如何设置身高适应？
一般做法如下：
样式设置宽度 100% ，

.img{
　　width: 100%;
}

向图片组件添加属性 mode="widthFix"
<image class="img" src="../../images/hello.png" mode="widthFix">
是可以实现的！

但问题是，我为什么要这么做，但是，只是，TMD显示的变形，或切掉一段，或在。mode设置成 aspectFit 当时，我甚至自动在图片上加了“HIGH”？

注：设置图片组件。 mode = "aspectFit" 您可以保留宽高比来缩放图片，以便完全显示图片的长边。也就是说，图片可以完全显示。

其实我们要从这个问题的源头微信小程序说起image该组件具有其默认高度，mage组件默认宽度300px、高度225px我们可以从控制台上看到这一点。

11.jpg

其中，以下内容image风格是微信image图片组件的默认宽度和高度，我们在做微信小程序开发时需要覆盖默认的图片样式，就像我上面只设置了图片的宽度：

图片组件
<image class="test_image" src="../../images/ai.png"></image>
样式
.test_image{width:630rpx;}

因此，在控制台中，上面的宽度被新样式覆盖，高度仍然是默认的，那么如果我们添加mode那么这一特征的价值呢？

<image class="test_image" mode="widthFix" src="../../images/ai.png"></image>

控制台显示如下：

22.jpg

您可以看到默认设置image样式的宽度和高度已成功覆盖。同时，我们可以在组件的调试控制台的源代码显示区域中发现图片组件已经动态添加了图片高度，如下图所示。

33.jpg

到目前为止，可以说我们成功地控制了高度，成功地适应了高度，但如何解释最初的异常呢？

这实际上是因为mode的widthFix官方解释如下：

widthFix 宽度保持不变，高度自动更改，原始图像的纵横比保持不变。

理论上，无论在什么情况下，长宽比都不应该改变，画面应该是正常的。但是，在widthFix实际的自适应高度需要引用，这是父容器的剩余高度和空间，就像我在项目中设置父元素的高度一样。30%因此，当我的图片的高度在显示空间中被限制并且图片被自适应地生成时，尽管图片显示是完整的，但它是变形的。我想知道这是不是微信的Bug。

因此，解决问题的方法也很简单。只需直接移除父元素的高度并调整父元素即可。

本文只是解决微信图片变形问题的一种方法。其他模式的问题实际上可以用同样的方式分析和解决。