前端小白的uni-app艰难学习之路

问题

在开发过程中我发现,有时会遇到明明图片宽高设置的是相同的值,但在运行后图片却并没有显示出相对应的效果,反而看起来宽高非常不成比例,如以下示例:
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
最终效果:
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
可以看到,这并不是我们想要的结果,经过我反复调试,最后发现想要达到我们预期的效果(宽高相等即为正圆或正方形)也是非常简单的!

解决

第一步: 我们需要给图片加一个父view组件(一开始我也是没有的),然后给父view的宽设置成百分比
第二步: 给图片固定宽高

uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
最终我们的效果显示:
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题

相关文章:

  • 2022-12-23
  • 2021-07-06
  • 2022-12-23
  • 2021-11-20
  • 2022-12-23
  • 2021-06-13
  • 2022-03-08
猜你喜欢
  • 2021-09-16
  • 2022-01-01
  • 2022-12-23
  • 2022-03-11
  • 2023-03-02
  • 2021-08-15
  • 2021-10-07
相关资源
相似解决方案