uniapp小程序图片变形/被裁切怎么办？

0 33 2025-05-23 06:54:11

本文目录

1. 配置方式

uniapp不能选择image元素，否则编辑器会报错，且小程序无法正确渲染。但如果不选择图片元素，图片则会被裁剪、变形。

那么，要如何解决这个问题呢？

配置方式

.withpics{
	display: flex;
	gap:10rpx;
	.item-withpic{
		width:33%;
		aspect-ratio: 1/1;
		.withpic{
		  width: 100%;
		  height: 100%;
		  object-fit: contain;
		  border-radius: 8rpx;
		}
	}
}

本文地址：https://xzo.com.cn/develop/mini/1290.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

uniapp

uniapp怎样引入公共css文件 uniapp中引入mp-html报错怎么办，要如何正确引入？ uniapp小程序图片变形/被裁切怎么办？ uniapp无法引入公用footer uniapp创建公用的请求地址 vue和uniapp是什么关系？

导出教程下载word版教程

关于小程序

小程序开发

小程序开发与常规的网站开发差别比较大，其语言虽然源自html、css、js基础，在实际应用上又有比较大的差别。小程序入门不像从一个cms到另一个cms，如果一定要做一个比较，那么从一门语言到另一门语言可能更加恰当。

小程序应用

小程序上线3年来，技术日臻成熟，可广泛应用于各行各业。

微信小程序让图片高度自适应的方法

微信小程序不允许wxss引入背景图片怎么办？

微信小程序怎样做加载中的动画并自动隐藏？

推荐小程序开发教程

帝国cms怎样开发微信小程序？ 目前市面上的帝国cms站点很多，而且因为帝国cms优质的性能与安全性，用户是越来...: 0 57

微信小程序轮播图高度怎样按照比例自适应 在常规的html网站，让轮播图高度自适应是很简单的。但到了微信小程序，轮播图高...: 0 378

帝国CMS有必要开发百度小程序吗？ 百度小程序的开放生态对网站站长及企业商家而言，能够从中获取到什么呢？百度智...: 1 57

微信小程序让图片高度自适应的方法 html代码中，图片高度如果设置为auto，则在不被其他属性替代的情况下，图片高度会...: 1 456

微信小程序怎样做加载中的动画并自动隐藏？ 微信小程序自带了加载中动画，免去了我们去开发的流程。那么，微信小程序的加载...: 0 402

推荐插件

帝国cms多栏目多数据表自动审核推送插件 本插件基于帝国cms帝国cms每日自动审核插件，在自动审核指定条数信息的基础上...: 0 808

帝国cms网站会员登录与退出历史记录日志插件 帝国cms默认只有上次登录时间与ip，没有一个记录清单，所以今天，我们分享这个帝...: 0 295

帝国cms百度AI黑白图像上色api接口对接插件 百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...: 0 333

帝国cms百度AI图像清晰度增强api接口对接插件 通过本插件，可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...: 0 440

帝国cms百度文字识别ocr接口对接插件 许多网站会做一些小功能小插件给客户使用以增强用户黏性，比如图片转文字，这种...: 0 378

帝国cms在线考试系统模板插件 一直没看到好用的帝国cms在线考试插件，所以自己开发了一款。在线考试插件用...: 0 1185

帝国cms联想词搜索高级搜索插件下载 帝国CMS自带的搜索功能虽然强大，但也有很强的局限性 -- 必须关键词完全匹配...: 0 632

帝国cms访问统计ip地址链接与封禁插件下载 下载鸥开发了这款帝国cms封禁ip插件，自动记录访问情况，让我们可以更快的识别...: 0 895