小程序项目之图片不变形

青旅半醒 2021-08-29 12:28 470阅读 0赞

## 一、问题 ##

原图应该显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
实际上显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]  
图片变形了。

## 二、解决 ##

我们的小程序图片规则已经定义好了宽高比例，需要运营童鞋按照比例给图。
    这种情况下，image标签用mode='widthFix'属性非常合适

<image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image>

## 三、扩展 ##

圆角设置，不是给image设置圆角的，外面又加了一层view容器，根据ui图的宽高，
    设置view宽高，并设置border-redius。里面图片仅保持不变形，适应外层容器。

<view class="img-c">
    	<image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image>
    </view>

.img-c{ 
    	display: block;
    	position: relative;
    	font-size: 0;
    	line-height: 0;
    	height: 376rpx;
    	border-radius: 12rpx;
    	overflow: hidden;
    	-webkit-backface-visibility: hidden;
    	-webkit-transform: translate3d(0, 0, 0);
    }
    .img-c image { 
    	width: 100%;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/fd93dee0cbb74ef888797a69cd2dbf78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/25fa138a36034f70b862b1e4b60ecad7.png

发表评论取消回复

表情：

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

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

相关阅读

相关图片变形链接

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

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

相关 css图片不变形处理

当UI出好图时，图片的格式都是有一定比例。但是你不知道的是从后台拉取的图片到底是什么比例的。如果给图片写死宽高的话，就会出现图片变形的问题目前的处理有两种方式１

叁歲伎倆/ 2023年07月10日 05:08/ 0 赞/ 20 阅读

相关 css解决图片变形问题

[https://www.jianshu.com/p/a1d0aeb3f813][https_www.jianshu.com_p_a1d0aeb3f813] [https_

╰半橙微兮°/ 2023年06月25日 08:26/ 0 赞/ 15 阅读

相关（背景图片不变形）神操作

1、设置背景图片div的宽高 2、使用background-image:url(“图片地址”); 3、重头戏： background-size:cover;/

超、凢脫俗/ 2023年06月25日 04:47/ 0 赞/ 11 阅读

相关微信小程序之生成图片分享

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

拼搏现实的明天。/ 2022年04月10日 06:45/ 0 赞/ 434 阅读

相关 16.微信小程序之图片剪裁

由用户上传图片，但可能用户上传的图片尺寸不合适会导致图片变形。这时就需要可以进行图片剪裁。做了调研，可以看看 1.[https://www.cnblogs.com/yua

刺骨的言语ヽ痛彻心扉/ 2022年04月02日 03:29/ 0 赞/ 328 阅读

相关图片显示不变形

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

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

相关 css图片压缩不变形

大的banner图片.电脑上显示效果不错.但手机上浏览,要么变形,要不变成高度很低的窄图片, 解决办法有几个.可以通过js方式动态调整比例,但是有时页面加载不完全,可能没

布满荆棘的人生/ 2021年09月25日 12:18/ 0 赞/ 382 阅读

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

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

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

相关 CSS3 微信小程序和web端适用让图片居中不变形

前言图片的宽高比和外层容器的宽高比不同是，设置充满的时候回发生形变。参考链接：https://www.cnblogs.com/web1/p/932

左手的ㄟ右手/ 2021年07月26日 14:27/ 0 赞/ 344 阅读