image标签设置宽度导致图片被压缩变形

当遇到大尺寸图片在设置固定宽高后导致变形的问题,可以采用CSS背景图的方式解决。在小程序中,用view或div替换image标签,并设置背景图样式,如`background-size: cover`确保图片按比例填充,保持原始比例,避免挤压变形。这种方法能保持图片质量并适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

问题

        使用image标签时发现图片尺寸比较大的时候,设置宽度高度会导致图片被宽高挤压变形;

方案

        小程序为例:

                使用view标签或div标签代替image,设定展示宽高使用背景图方式;

                设置css样式

        <view class="goods-img" style="background-image: url({{item.goodsMainImage}});"></view>

       . goods-img{

          width: 100%;

          height: 345rpx;

          border-radius: 20rpx 20rpx 0 0;

          background-repeat: no-repeat;

          background-position: center center;

          background-size: cover;

        }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值