小程序image图片变形

忘是亡心i 2023-06-27 12:36 44阅读 0赞

有次写商城，发现图片总是会变形，找了很久都不知道是什么问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4_size_16_color_FFFFFF_t_70]

后来发现小程序的image标签是有默认的宽高的  
`<image>` 组件默认宽度 300px、高度 225px；

小程序的`image`标签是有`mode`模式的，图片缩放模式

这个模式有缩放模式，有裁剪模式，具体可以看文档

我这里的话就是没有去掉图片的默认宽高

<image src="" mode="widthFix"></image> //直接设置mode=widthFix就可以去掉默认的宽高

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106172332822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106172934455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzQ3NTA4,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关图片变形链接

![20200422154336927.png][] 图像小部件 \[Túxiàng xiǎo bùjiàn\] Image widget [20200422

- 日理万妓/ 2023年07月14日 05:23/ 0 赞/ 280 阅读

相关小程序image图片变形

有次写商城，发现图片总是会变形，找了很久都不知道是什么问题 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

忘是亡心i/ 2023年06月27日 12:36/ 0 赞/ 45 阅读

相关微信小程序 Image 图片实现宽度100%，高度自适应

做法如下：样式设置宽度100%， .img{ 　　width: 100%; } 添加属性 mode

你的名字/ 2023年06月20日 09:12/ 0 赞/ 102 阅读

相关微信小程序-Image 图片实现宽度100%，高度自适应

IT实战联盟博客：http://blog.100boot.cn 大家好，今天在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然，如下图所示：

柔光的暖阳◎/ 2022年06月03日 22:40/ 0 赞/ 424 阅读

相关小程序使用cover-view和cover-image（图片会被文字覆盖）

通过定位将遮罩的图片铺满video组件，但是产生了以下几个bug： bug1：使用`z-index`将按钮和标题放在遮罩之上无效 bug2: 编辑器预览正常，但是真机

r囧r小猫/ 2021年11月08日 23:58/ 0 赞/ 595 阅读

相关图片显示不变形

ImageView我们是经常使用的控件，对于它的属性和设置早已熟烂于心，但是有时候还是会碰到一些问题，比如：变形问题， ![这里写图片描述][SouthEast] 一般解决

快来打我*/ 2021年09月26日 06:38/ 0 赞/ 560 阅读

相关微信小程序 image图片组件实现宽度固定高度自适应

添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthF

待我称王封你为后i/ 2021年09月17日 08:04/ 0 赞/ 590 阅读

相关微信小程序image图片自适应宽度比例显示的方法

一.了解image组件 ![20170505164345853][] 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下

迷南。/ 2021年09月12日 06:34/ 0 赞/ 1170 阅读

相关微信小程序 image 图片组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，[2.3.0][] 起支持云文

梦里梦外;/ 2021年09月08日 06:22/ 0 赞/ 661 阅读

相关小程序项目之图片不变形

一、问题原图应该显示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

青旅半醒/ 2021年08月29日 12:28/ 0 赞/ 551 阅读